vue.js 动态绑定 class

• 数据变量

HTML代码：
Demo2

Javascript代码：
data: {
  classA: 'class-a'  //当classA改变时将更新class
}

渲染后的HTML:
Demo2

• 三目运算符

HTML代码：
Demo3

渲染后的HTML:
Demo3

• 对象

HTML代码：
Demo4

Javascript代码：
data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}

渲染后的HTML:
Demo4

• 数组

HTML代码：
Demo6

Javascript代码：
data: {
 classA: 'class-a',
 classB: 'class-b'
}
渲
染后的HTML:
Demo6

• 数据、对象混合

HTML代码：
Demo7

Javascript代码：
data: {
 classA: 'class-a',
 objectClass: {
   classB: 'class-b',   // classB 的值为class-b, 则将classB的值添加到class列表
   classC: false,        // classC值为false,将不添加classC
   classD: true          // classD 值为true，classD将被直接添加到class列表
  }；
}

渲染后的HTML:
Demo7