动态class几种写法

对象语法（这里的active加不加单引号都可以）

1下面的语法表明 active 这个 class 存在与否将取决于数据 isActive 的 truthiness。

<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="{ active: isActive, sort: isSort }"></div>

2 v-bind:class 指令也可以与普通的 class attribute 共存

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

3 绑定的数据对象不必内联定义在模板里：

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

data() {
    return {
        classObject: {
            active: true,
            static: false
        }
    } 
}

4 也可以在这里绑定一个返回对象的计算属性

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

data: {
    return {
        isActive: true,
        error: null
    } 
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      static: this.error
    }
  }
}

数组语法

1 只有数组

<div :class="[isActive,isSort]"></div>

data() {
  return{
    isActive: active ,
    isSort: sort 
 }
}

渲染为

<div class="active sort"></div>

2 数组与三元运算符结合
注意：

• 三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染,
• 在数组里面的类名需要加上引号, 否则不能正确渲染,

// 当isActive 为true时class为activeClass， false时为errorClass，otherClass是一直存在
<div v-bind:class="[isActive ?  activeClass :  errorClass ,  otherClass ]"></div>

3 数组对象结合动态判断
注意：当在数组中使用对象语法时，前面这个active在对象里面可以不加单引号，但是后面这个sort依旧要加单引号

:class="[{ active: isActive },  sort ]"

原文：https://www.csdn.net/tags/NtDakg2sNTg1MjYtYmxvZwO0O0OO0O0O.html