操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind /：处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

官方推荐动态绑定class写法是这样儿↓↓↓↓↓↓↓↓↓

方法一：(绑定一个数据对象在定义模板内联)

v-bind:class="{ active: isActive, 'text-danger': hasError }"

其中active和text-danger是想动态绑定的两个类名，isActive和hasError是控制其:前边类名是否显示的动态变量

一开始这样写并没有生效，也没有想过打开F12查看，后来F12看到并不是没有生效的，而是两个class中包含了重复的样式，其中一个层级高把另一个给覆盖了，另外更夸张的是自己还加了个行内!!!!!!   这太粗心了.........

 

方法二：(和方法一其实是一样儿的，只不过是将数据对象定义在data中了)

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

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

亲测一样生效！！！不过这种方法并不适用于动态变量是循环出来的情

 

方法三：(绑定一个返回对象的计算属性,官方说是一个常用且强大的模式,不过至今为止我还没用过)

Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

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

data: {

isActive: true, error: null

},

computed: {

    classObject: function () {

          return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' }

   }

}