對于數據綁定，一個常見的需求是操作元素的class列表和它的內聯樣式。因為它們都是attribute，我們可以用v-bind處理它們：只需要計算出表達式最終的字符串。不過，字符串拼接麻煩又易錯。因此，在v-bind用于class和style時，Vue.js專門增強了它。表達式的結果類型除了字符串以外，還可以是對象或數組。
一、綁定HTML Class
1.對象語法
我們可以傳給v-bind:class一個對象，以動態地切換class。注意，v-bind:class指令可以與普通的class特性共存。代碼示例如下:
<div id="example" class="static" v-bind:class="{'didi-orange':isRipe,'didi-green':isNotRipe}"></div>var vm = new Vue({el:'example',data:{isRipe:true,isNotRipe:false }
}) 渲染為:
<div id='example' class='static didi-orange'></div>
當isRipe和isNotRipe變化時，class列表將相應地更新。例如，如果isNotRipe變為true，那么class列表將變為"static didi-orange didi-green"。（當然，一般情況下，v-bind:class綁定的對象中只有一個class會生效，這取決于用戶自己的設置。）
注：盡管可以用Mustache標簽綁定class，比如class="{{className}}",但是我們不推薦這種寫法和v-bind:class混用。
我們也可以直接綁定數據中的一個對象，代碼示例如下：
<div id="example" v-bind:class="ddfe"></div> var vm = new Vue({el:'example', data:{ddfe:{'didi-orange':'true','didi-green':'false' } } })
還可以在這里綁定一個返回對象的計算屬性。這是一種常用且強大的模式。代碼示例如下:
<div id='example' v-bind:class="ddfe"></div> var vm = new Vue({el:'example',data:{didiAge:4,didiMember:6000 }computed:{ddfe:function(){return{'didi-orange':this.didiAge>3 ? true:false,'didi-large':this,didiMember>1000? true:false} } } })
2.數組語法
我們可以把一個數組傳給v-bind:class,以應用一個class列表。代碼示例如下:
<div id='example' v-bind:class="[didiHandsome,didiBeautiful]"></div> var vm = new Vue({el:'example',data:{didiHandsome:'didi-handsome',didiBeautiful:'didi-beautiful' } })
渲染為：
<div id="example" class="didi-handsome didi-beautiful"></div>
如何想根據條件切換列表中的class，則可以用三元表達式。代碼示例如下：
<div id="example" v-bind:class="[didiHandsome,isRipe ? didiOrange: '']"></div>
此例始終添加didiHandsome，但是只有在isRipe為true時才會添加didiOrange。
不過，當有多個條件class時這樣寫有些煩瑣。在Vue.js 1.0.19及以后版本中，可以在數組語法中使用對象語法。代碼示例如下：
<div id="example" v-bind:class="[didiHandsome,{didiOrange: isRipe,didiGreen: isNotRipe}]"></div> 二、綁定內聯樣式
1.對象語法
v-bind:style的對象語法十分直觀----看著非常像CSS，其實它是一個JavaScript對象。CSS屬性名可以用駝峰式或短橫分隔命名。代碼示例如下：
<div id="example" v-bind:style="{color:didiColor,fontSize:fontSize + 'px'}"></div>
var vm = new Vue({el:'example',data:{didiColor:'orange',fontSize:30 }
}) 通常直接綁定到一個樣式對象更好，讓模板更清晰。代碼示例如下：
<div id="example" v-bind:style="ddfe"></div> var vm = new Vue({el:'example', data:{ddfe:{color:orange,fontSize:'13px'}} })
同樣的，對象語法常常結合返回對象的計算屬性使用。
2.數組語法
v-bind:style的數組語法可以將多個樣式對象應用到一個元素上。代碼示例如下:
<div v-bind:style="[ddfe,didiFamily]"></div>
3.自動添加前綴
當v-bind:style使用需要廠商前綴的CSS屬性時，如transform，Vue.js會自動偵測并添加相應的前綴。在Vue.js源碼中采用prefix函數來完成這個功能。
?
)
