1、動(dòng)態(tài)綁定 class 的方法之對(duì)象語(yǔ)法：
我們可以傳給 v-bind:class 一個(gè)對(duì)象徙歼，以動(dòng)態(tài)地切換 class：
<div v-bind:class="{ active: isActive }"></div>
你也可以在對(duì)象中傳入更多屬性來(lái)動(dòng)態(tài)切換多個(gè) class婚度，v-bind:class 指令也可以與普通的 class 屬性共存，
<div class="static" v-bind:class="{ active: isActive,error: isError }"></div>
我們也可以在這里綁定一個(gè)返回對(duì)象的計(jì)算屬性不瓶，這是一個(gè)常用且強(qiáng)大的模式：
<div v-bind: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'
}
}
}
2十酣、動(dòng)態(tài)綁定 class 的方法之?dāng)?shù)組語(yǔ)法：
當(dāng)需要使用多個(gè) class 時(shí)，我們可以把一個(gè)數(shù)組傳給 v-bind:class匈棘，以應(yīng)用一個(gè) class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
如果想根據(jù)條件切換列表中的 class丧慈，可以用三元表達(dá)式或者在數(shù)組語(yǔ)法中使用對(duì)象語(yǔ)法：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> // 三元表達(dá)式
<div v-bind:class="[{ active: isActive }, errorClass]"></div> // 數(shù)組中的對(duì)象語(yǔ)法
當(dāng)然也可以綁定一個(gè)計(jì)算屬性：
<p :class="classes"></p>
data:{
size:'large',
disabled:true
},
computed:{
classes:function(){
return[
'btn',
{
['btn-' + this.size]:this.size !== '',
['btn-disabled']:this.disabled
}
]
}
}
3、當(dāng)在一個(gè)自定義組件上使用 class 或 :class 屬性時(shí)主卫，這些類(lèi)將被添加到該組件的根元素上面逃默，這個(gè)元素上已經(jīng)存在的類(lèi)不會(huì)被覆蓋，當(dāng)要給具體的子元素設(shè)置類(lèi)名時(shí)队秩，應(yīng)當(dāng)使用組件的 props 來(lái)傳遞笑旺。
4、使用 v-bind:style（即 :style）可以給元素綁定內(nèi)聯(lián)樣式馍资，方法與 :class 類(lèi)似筒主，也有對(duì)象語(yǔ)法和數(shù)組語(yǔ)法关噪，css 屬性名稱(chēng)要使用駝峰命名或短橫線(xiàn)分隔命名（記得用單引號(hào)括起來(lái)）。
