3.7　绑定内联样式（style）

内联样式是将CSS样式编写到元素的style属性中。

3.7.1　对象语法

与使用属性为元素设置class样式相同，在Vue中也可以使用对象的方式为元素设置style样式。

v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或短横线分隔（kebab-case，记得用引号包裹起来）来命名。

【例3.14】　style对象语法（源代码\ch03\3.14.html）。

在Chrome浏览器中运行程序，打开控制台，渲染结果如图3-16所示。

也可以在Vue实例对象中定义属性，用来代替样式属性，例如下面的示例代码：

在浏览器中的运行效果和上例相同（见图3-16）。

同样地，可以直接绑定一个样式对象变量，这样的代码看起来也会更加简洁美观。

在浏览器中运行，打开控制台，渲染结果和上面的示例相同（见图3-16）。

同样地，对象语法常常结合返回对象的计算属性使用。

在Chrome浏览器中运行程序，渲染的结果如图3-17所示。

3.7.2　数组语法

v-bind:style的数组语法可以将多个样式对象应用到同一个元素上，样式对象可以是data中定义的样式对象和计算属性中return的对象。示例代码如例3.15所示。

【例3.15】　style数组语法（源代码\ch03\3.15.html）。

在Chrome浏览器中运行程序，打开控制台，渲染结果如图3-18所示。