vue :class 给 DOM 添加一个类

1，绑定对象

<div v-bind:class="{ 'active' : isActive }"></div>

isActive 是一个布尔值，如果 isActive = true；那么 div会添加active类

2，绑定的数据对象可以放在 data 中

<div class=" classObject "></div>

data: {
  classObject: {
    `active` : true,
    'text-danger': false
  }
}

div会绑定classObject，根据classObject里面的布尔值确定div是否添加active与text-danger属性

3，用三元表达式确定绑定的对象

// 这里 三元表达式，注意绑定的方式 :[ ]
<div v-bind:class="[isActive ? 'activeClass' : ' ', errorClass]"></div>

根据isActive来确是否绑定activeClass类，可以绑定多个对象

<span :class="[forceList.includes('value') ? 'red' : 'detail']"  :title="form.value">
       {{ form.value }}
</span>

4，用计算属性来绑定对象

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject ( ) {
    return {
      'active' : this.isActive && !this.error,
      'text-danger' : this.error && this.error.type === 'fatal'
    }
  }
}

5，用方法来绑定对象

<div v-for="(item,index) of lineList" :key="index">
    <div :class="{'hasRedColor': compare(item,index)}">
        {{ item }}
    </div>
</div>

compare(value, index) {
   if (index % 2 == 1) {
     return true
    }else{
     return false
   }
}