Appearance
动态绑定样式 v-bind
对象语法
:class 绑定的样式和class绑定的不冲突
直接绑定一个data
html
<div v-bind:class="{ active: isActive }"></div>
1
active这个 class 存在与否将取决于数据属性isActive的 布尔值
html
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
1
data中使用一个对象绑定
javascript
data: {
classObject: {
active: true,
'text-danger': false
}
}
1
2
3
4
5
6
2
3
4
5
6
计算属性中绑定
javascript
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
数组语法
html
<div v-bind:class="[activeClass, errorClass]"></div>
1
直接动态绑定一个class
javascript
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
1
2
3
4
2
3
4
三元表达式
html
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
1
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
html
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
1