操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
1、对象语法
给v-bind:class传入一个对象，如下：
<div v-bind:class="{ active: isActive }"></div>
对象的属性名为class的名称，值为布尔值，如果值为true，那么vue就会将其对应的属性名加到该dom元素上面，他与DOM元素原本的class不冲突，如果有原来的class，那么他就将其class添加进去。（是添加，不是替换），比如：
注意：属性名如果含有中划线，比如text-danger，那么应该加上引号包裹
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div class="demo-class" v-bind:class="{ active: isActive,'text-danger': hasError }">我是绑定class对象</div>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>
</html>
最后我看DOM元素:
<div class="demo-class active">我是绑定class对象</div>
拥有了两个class，而false的那个，没有添加进去，原来的demo-class也还是保留着的。
当然， v-bind:class="{ active: isActive,‘text-danger’: hasError }" 这么一长串字符串写在DOM元素上，感觉对于dom元素太过冗余，所以还有另一种方式：通过计算属性或者直接使用data下面的对象来返回绑定的class对象。
那么我们上面代码可以这样写：这里以计算属性返回，data里面的属性同理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div class="demo-class" v-bind:class="{ active: isActive,'text-danger': hasError }">我是绑定class对象</div>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: false,
},
computed: {
classObj(){
return {
active: this.isActive,
'text-danger': this.hasError
}
}
}
})
</script>
</html>
2、数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
但是如果条件比较复杂，三目表达式的能力有限，那么我们就可以换成对象结合数组的形式：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
数组绑定的作用和对象绑定的作为区别就是对象绑定的话，类名就限制了，只能控制此类是否加上，而数组绑定，类名是一个变量，是可以同一个变量切换类名的。
