CLASS

1、绑定单个class

<div :class="{'active':isActive}"></div>
data() {
    return {
      isActive: true
    };
}

2、绑定多个class，需要逗号隔开就行：（这里的activeTwo加不加引号也可以）

<div v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>
data() {
    return {
      isActive: true,
      hasError: true
    };
}

3、绑定的数据对象

<div :class="classObject"></div>
data: {
  classObject: {
    active: true,
  }
}

4、绑定数组

<div :class="[activeClass, errorClass]"></div>
data() {
    return {
      activeClass: "active",
      errorClass: "disActive"
    };
}

5、数组与三元运算符结合判断选择需要的class

<div :class="[isActive ? 'active' : 'no']">1111</div>
data() {
    return {
      isActive: true,
    }
},

4、绑定一个返回对象的计算属性

<div :class="classObject"></div>
export default {
  data() {
    return {
        isActive: true,
    };
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive,
    }
  }
}