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

1．對(duì)象語(yǔ)法

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

示例代碼如下：

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

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

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

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

示例代碼如下：

3．多重值

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

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

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

4．自動(dòng)添加前綴

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