今天繼續(xù)昨天為弄完：class與style綁定
數(shù)組語法
一
:class除了可以綁定一個(gè)對(duì)象遇革，也可以綁定數(shù)組
<div :class="[activeClass, errorClass]"> </div>
data {
activeClass: 'active',
errorClass: 'text-danger'
}
與對(duì)象語法不同的是彭羹，數(shù)組語法綁定在data中的值將直接被渲染载迄。
上面的例子就直接渲染為：
<div class="active text-danger"></div>
在實(shí)際運(yùn)用中我們會(huì)遇到class的某個(gè)屬性需要?jiǎng)討B(tài)切換捉兴，而另一個(gè)屬性不需要切換，直接渲染马僻∑氡危可以有兩種方式：
三元表達(dá)式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
逗號(hào)后面的將直接被渲染，而前面的表達(dá)式惋耙，將進(jìn)行判斷虽缕。這種方式適用于比較class綁定的值最多為三個(gè)。
數(shù)組中嵌套對(duì)象：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
這種中方式在class的值比較多也比較適用女淑。對(duì)象語法依然按照對(duì)象語法的使用方式瞭郑，只不過外層包裹了數(shù)組，所以逗號(hào)后面的值將一直被渲染鸭你。
那么假如如果綁定多個(gè)：
<div v-bind:class="[{ active: isActive屈张，'text-danger': hasError, title: istitle }, errorClass]"></div>
我們是不是依然可以改寫為：
<div v-bind:class="[{ classObject }, errorClass]"></div>data: {
isActive: true,
error: null
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
這個(gè)是不是可以，以后可以試一試,
今天容我浪一浪袱巨，明天好好學(xué)習(xí)~~祝你玩的開心阁谆。替我向你家“老大“”問好~~
