Vue.js 教程
class 與 style 是 HTML 元素的屬性，用于設(shè)置元素的樣式，我們可以用 v-bind 來設(shè)置樣式屬性。
Vue.js v-bind 在處理 class 和 style 時(shí)， 專門增強(qiáng)了它。表達(dá)式的結(jié)果類型除了字符串之外，還可以是對(duì)象或數(shù)組。
我們可以為 v-bind:class 設(shè)置一個(gè)對(duì)象，從而動(dòng)態(tài)的切換 class:
實(shí)例中將 isActive 設(shè)置為 true 顯示了一個(gè)綠色的 div 塊，如果設(shè)置為 false 則不顯示：
以上實(shí)例 div class 為：
<div class="active"></div>
我們也可以在對(duì)象中傳入更多屬性用來動(dòng)態(tài)切換多個(gè) class 。
text-danger 類背景顏色覆蓋了 active 類的背景色：
以上實(shí)例 div class 為：
<div class="static active text-danger"></div>
我們也可以直接綁定數(shù)據(jù)里的一個(gè)對(duì)象：
text-danger 類背景顏色覆蓋了 active 類的背景色：
實(shí)例 3 與 實(shí)例 2 的渲染結(jié)果是一樣的。
此外，我們也可以在這里綁定返回對(duì)象的計(jì)算屬性。這是一個(gè)常用且強(qiáng)大的模式：
我們可以把一個(gè)數(shù)組傳給 v-bind:class ，實(shí)例如下：
以上實(shí)例 div class 為：
<div class="active text-danger"></div>
我們還可以使用三元表達(dá)式來切換列表中的 class ：
errorClass 是始終存在的，isActive 為 true 時(shí)添加 activeClass 類：
我們可以在 v-bind:style 直接設(shè)置樣式：
以上實(shí)例 div style 為：
<div style="color: green; font-size: 30px;">小白教程</div>
也可以直接綁定到一個(gè)樣式對(duì)象，讓模板更清晰：
v-bind:style 可以使用數(shù)組將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上：
注意：當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時(shí)，如 transform ，Vue.js 會(huì)自動(dòng)偵測(cè)并添加相應(yīng)的前綴。