class 與 style 是 HTML 元素的屬性义辕，用于設(shè)置元素的樣式，我們可以用 v-bind 來設(shè)置樣式屬性棉磨。
Vue.js v-bind 在處理 class 和 style 時噩峦， 專門增強(qiáng)了它摩疑。表達(dá)式的結(jié)果類型除了字符串之外匕累，還可以是對象或數(shù)組渡八。
我們可以為 v-bind:class 設(shè)置一個對象央星，從而動態(tài)的切換 class:
實(shí)例中將 isActive 設(shè)置為 true 顯示了一個綠色的 div 塊霞怀，如果設(shè)置為 false 則不顯示：
以上實(shí)例 div class 為：
我們也可以在對象中傳入更多屬性用來動態(tài)切換多個 class 。
text-danger 類背景顏色覆蓋了 active 類的背景色：
以上實(shí)例 div class 為：
我們也可以直接綁定數(shù)據(jù)里的一個對象：
text-danger 類背景顏色覆蓋了 active 類的背景色：
實(shí)例 3 與 實(shí)例 2 的渲染結(jié)果是一樣的莉给。
此外毙石，我們也可以在這里綁定返回對象的計算屬性。這是一個常用且強(qiáng)大的模式：
new Vue({? el:'#app',data: {? ? isActive:true,? ? error: {? ? ? value:true,? ? ? type:'fatal'}? },? computed: {? ? classObject: function () {return{? base:true,? ? ? ? active:this.isActive && !this.error.value,'text-danger':this.error.value &&this.error.type ==='fatal',? ? ? }? ? }? }})
我們可以把一個數(shù)組傳給?v-bind:class?颓遏，實(shí)例如下：
以上實(shí)例 div class 為：
我們還可以使用三元表達(dá)式來切換列表中的 class ：
errorClass 是始終存在的徐矩，isActive 為 true 時添加 activeClass 類：
我們可以在?v-bind:style?直接設(shè)置樣式：
菜鳥教程
以上實(shí)例 div style 為：
菜鳥教程
也可以直接綁定到一個樣式對象，讓模板更清晰：
菜鳥教程
v-bind:style 可以使用數(shù)組將多個樣式對象應(yīng)用到一個元素上：
菜鳥教程
注意：當(dāng)?v-bind:style?使用需要特定前綴的 CSS 屬性時叁幢，如 transform 滤灯，Vue.js 會自動偵測并添加相應(yīng)的前綴。
