5.3.2　綁定內(nèi)聯(lián)樣式

1．對象語法

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

示例代碼如下：

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

提示：對象語法常常結(jié)合返回對象的計(jì)算屬性使用。

2．?dāng)?shù)組語法

v-bind:style的數(shù)組語法可以將多個樣式對象應(yīng)用到一個元素上。

示例代碼如下：

3．多重值

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

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

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

4．自動添加前綴

當(dāng)v-bind:style使用需要廠商前綴的CSS屬性（如transform）時，Vue.js會自動偵測并添加相應(yīng)的前綴。在Vue.js源碼中采用prefix函數(shù)來完成這個功能。因?yàn)楦鞔鬄g覽器的私有屬性不同，所以我們有時需要在樣式前添加前綴，例如-webkit-（谷歌）、-ms-（微軟）、-moz-（火狐）。但是在Vue中就無須添加，因?yàn)閂ue會自動添加前綴。