vue动态绑定class的最常用几种方式：

第一种：（最简单的绑定）

1.绑定单个class

html部分：

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

js部分：判断是否绑定一个active

data() {
    return {
      isActive: true
    };
  }

结果渲染为：

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

2.若要绑定多个class，需要逗号隔开就行：（这里的activeTwo加不加引号都可以，也一样都能渲染，如下）

 <div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

js部分：判断是否绑定对应class

  data() {
    return {
      isActive: true,
      hasError: true
    };
  }

结果渲染为：

<div class="activeOne activeTwo activeThree"></div>

第二种：（绑定的数据对象）

<div :class="[classA, classB]">Demo7</div>

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

渲染后的HTML:
<div class="class-a class-b classD">Demo7</div>

第三种：（绑定一个返回对象的计算属性）

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

export default {
  data() {
    return {
    isActive: true,
    };
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive,
    }
  }
}

结果渲染为：

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

第四种：（单纯数组方法）

<div :class="[activeClass, errorClass]"></div>

 data() {
    return {
      activeClass: "active",
      errorClass: "disActive"
    };
  },

结果渲染为：

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

第五种：（数组与三元运算符结合判断选择需要的class）

<div :class="[isActive?'active':'disActive']"></div>

 data() {
    return {
      isActive: false,
    };
  },

结果渲染为：

<div class="disActive"></div>

144