vue.js 动态绑定 class

• 数据变量

HTML代码：
<div :class="classA">Demo2</div>

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

渲染后的HTML:
<div class="class-a">Demo2</div>

• 三目运算符

HTML代码：
<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>

渲染后的HTML:
<div class="class-a">Demo3</div>

• 对象

HTML代码：
<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>

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

渲染后的HTML:
<div class="class-b">Demo4</div>

• 数组

HTML代码：
<div :class="[classA, classB]">Demo6</div>

Javascript代码：
data: {
 classA: 'class-a',
 classB: 'class-b'
}
渲
染后的HTML:
<div class="class-a class-b">Demo6</div>

• 数据、对象混合

HTML代码：
<div :class="[classA, classB]">Demo7</div>

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:
<div class="class-a class-b classD">Demo7</div>