2.2 绑定Style样式

1、Style绑定对象

通过v-bind:style可以直接让Style绑定对象，例如：

<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"/>

v-bind:style的赋值是对象{}，其中color是style样式，activeColor是Vue变量，合并成一个对象。生动形象地描述一下：就是用Vue变量控制style样式，是不是有种用电脑控制挖掘机炒菜的感觉：）

让v-bind:style绑定到一个样式对象，这会让模板更清爽一些，例：

<div v-bind:style="styleObj"></div>

这个样式对象在Vue里定义：

data: {
    styleObj: {
        color: 'red',
        fontSize: '30px'
    }
}

2、Style绑定数组

v-bind:style 的数组语法可以将多个样式对象：baseStyles，overridingStyles应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

3、Style绑定多重值

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

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

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

----------------------------------------------------------------------------------------------------------------
本内容为《抹平Vue学习曲线》的部分章节，需要阅读完整书籍的，可以跟作者沟通。
----------------------------------------------------------------------------------------------------------------