Vue中的class屬性可以接受一個(gè)對(duì)象，該對(duì)象描述了條件性的class名，這使得開發(fā)者可以很方便地實(shí)現(xiàn)動(dòng)態(tài)的樣式。

<div v-bind:class="{ active: isActive }"></div>
data: {
isActive: true
}

isActive是在data中定義的變量，當(dāng)它為true時(shí)，使用active樣式，否則不添加active樣式。如果我們希望在一組class名稱中切換，可以使用數(shù)組形式。

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}

activeClass和errorClass都是從data中引用的，并被應(yīng)用到同一個(gè)元素。

我們也可以通過計(jì)算屬性來返回一個(gè)class對(duì)象或數(shù)組。

<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'
}
}
}

這個(gè)計(jì)算屬性返回一個(gè)對(duì)象，其中包含active和text-danger屬性，這些屬性都是根據(jù)data中的變量動(dòng)態(tài)生成的。