5.3.2　綁定內聯樣式

1．對象語法

v-bind:style的對象語法十分直觀，看著非常像CSS，其實它是一個JavaScript對象。CSS屬性名可以用駝峰式（camelCase）或短橫（kebab-case）分隔命名。

示例代碼如下：

通常，直接綁定到一個樣式對象會更好，讓模板更清晰。示例代碼如下：

提示：對象語法常常結合返回對象的計算屬性使用。

2．數組語法

v-bind:style的數組語法可以將多個樣式對象應用到一個元素上。

示例代碼如下：

3．多重值

從Vue.js 2.3.0開始就可以為style綁定中的屬性提供一個包含多個值的數組，常用于提供多個帶前綴的值。例如：

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

上述語句會渲染數組中最后一個被瀏覽器支持的值。在這個例子中，如果瀏覽器支持不帶前綴的flexbox，那么渲染結果會是display:flex。

4．自動添加前綴

當v-bind:style使用需要廠商前綴的CSS屬性（如transform）時，Vue.js會自動偵測并添加相應的前綴。在Vue.js源碼中采用prefix函數來完成這個功能。因為各大瀏覽器的私有屬性不同，所以我們有時需要在樣式前添加前綴，例如-webkit-（谷歌）、-ms-（微軟）、-moz-（火狐）。但是在Vue中就無須添加，因為Vue會自動添加前綴。