綁定HTML class
一：對象語法
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" >
</div>
data: {
isActive: true,
hasError
}
也可以直接綁定數(shù)據(jù)里的一個對象
<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',
}
}
}
二：數(shù)組語法
<div v-bind:class="[activeClass, errorClass]">
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
如果想根據(jù)條件切換列表中的class，可以用三元表達(dá)式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
當(dāng)有多個條件class時
<div v-bind:class="[{ active: isActive }, errorClass]">
