v-bind用于class和style時，Vue做了增強，表達式結果除了字符串之外，還可以是對象或數組。 ### 綁定HTMLClass #### 對象語法 ``` <div v-bind:class="{ active: isActive }"></div> ``` isActive是實例中的數據。也可以與普通的class屬性共存。 ``` <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> ``` 綁定的數據對象不必內聯定義在模板里，可以如下定義： ``` <div v-bind:class="classObject"></div> data: { classObject: { active: true, 'text-danger': false } } ``` 還可以綁定一個返回對象的計算屬性： ``` data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } ``` #### 數組語法 ``` <div v-bind:class="[activeClass, errorClass]"></div> ``` ``` data: { activeClass: 'active', errorClass: 'text-danger' } ``` 渲染結果： ``` <div class="active text-danger"></div> ``` 三元表達式： ``` <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> ``` 這樣寫將始終添加`errorClass`，但是只有在`isActive`是 truthy[\[1\]](https://cn.vuejs.org/v2/guide/class-and-style.html#footnote-1)時才添加`activeClass`。 不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法： ``` <div v-bind:class="[{ active: isActive }, errorClass]"></div> ``` #### 用在組件上 ``` Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' }) ``` 在一個自定義組件上使用class屬性時，這些class將會被添加到該組件的根元素上面。這個元素上已經存在的class不會被覆蓋。 以上實例在使用的時候添加另外的class ``` <my-component class="baz boo"></my-component> ``` 則最終的渲染效果為： ``` <p class="foo bar baz boo">Hi</p> ``` 對于帶綁定class也同樣適用： ``` <my-component v-bind:class="{ active: isActive }"></my-component> ``` 當 isActive 為 truthy[1] 時，HTML 將被渲染成為： ``` <p class="foo bar active">Hi</p> ``` ### 綁定內聯樣式 v-bind:style 直觀看像CSS， 其實是一個JavaScript對象，CSS屬性名可以用駝峰式或短線分隔命名： ``` <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 } ``` 也可以綁定一個樣式對象： ``` <div v-bind:style="styleObject"></div> data: { styleObject: { color: 'red', fontSize: '13px' } } ``` #### 數組語法 可以綁定多個樣式對象到同一個元素。 ``` <div v-bind:style="[baseStyles, overridingStyles]"></div> ``` #### 自動添加前綴 當`v-bind:style`使用需要添加[瀏覽器引擎前綴](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS 屬性時，如`transform`，Vue.js 會自動偵測并添加相應的前綴。 #### 多重值 從 2.3.0 起你可以為`style`綁定中的屬性提供一個包含多個值的數組，常用于提供多個帶前綴的值，例如： ``` <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> ```