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会自动添加前缀。