13.1 对象语法

:class 绑定的样式和class绑定的不冲突

13.1.1 直接绑定一个data

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

active 这个 class 存在与否将取决于数据属性 isActive 的 布尔值

1
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

13.1.2 data中使用一个对象绑定

1
2
3
4
5
6
data: {
classObject: {
active: true,
'text-danger': false
}
}

13.1.3 计算属性中绑定

1
2
3
4
5
6
7
8
9
10
11
12
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}

13.2 数组语法

1
<div v-bind:class="[activeClass, errorClass]"></div>

13.2.1 直接动态绑定一个class

1
2
3
4
data: {
activeClass: 'active',
errorClass: 'text-danger'
}

13.2.2 三元表达式

1
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:

1
<div v-bind:class="[{ active: isActive }, errorClass]"></div>