绑定HTML class
一：对象语法
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" >
</div>
data: {
isActive: true,
hasError
}
也可以直接绑定数据里的一个对象
<div v-vind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
介绍一个强大的模式：我们可以在这里绑定返回的计算属性
<div v-vind: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',
}
}
}
二：数组语法
<div v-bind:class="[activeClass, errorClass]">
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
如果想根据条件切换列表中的class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
当有多个条件class时
<div v-bind:class="[{ active: isActive }, errorClass]">
