Vue-样式绑定（Class与Style）

操作元素的 class 列表和内联样式是数据绑定的一个常见需求，我们可以通过v-bind（或者简写为：）进行绑定，它后边跟的就是一个表达式，其类型除了字符串之外，还可以是对象或数组。

那么v-bind是如何绑定class的呢？

1.对象语法（class的对象绑定）

我们可以传给 v-bind:class 一个对象（对象中也可以传入更多字段），以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

这表示，给div元素绑定了一个class，class的名字是active，它存在与否将取决于isActive 这个变量是不是truthy。

2.数组语法（class的数组绑定）

我们可以传给 v-bind:class一个数组，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

这表示，页面上的div元素会显示一个class，class由数组里边的变量，即activeClass和errorClass的内容所决定，只要它的值不为空，页面就会显示对应的class。

如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这表示，始终添加一个errorClass，但是只有当isActive为truthy时才会添加 activeClass。

3.用在组件上（class的组件绑定）

当在一个自定义组件上使用 class 时， class 将被添加到该组件的根元素上面，这个元素上已经存在的 class 不会被覆盖。

例如，如果你声明了这个组件：
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

然后在使用它的时候添加一些 class：
<my-component class="baz boo"></my-component>

那么，HTML 将被渲染为：
<p class="foo bar baz boo">Hi</p>


即使是对于class 的对象绑定也同样适用：
<my-component v-bind:class="{ active: isActive }"></my-component>

当 isActive的值为truthy时，HTML 将被渲染成为：
<p class="foo bar active">Hi</p>

v-bind又是如何绑定内联样式的呢？

1.对象语法（style的对象绑定）

我们可以传给v-bind:style 一个 JavaScript 对象，这个对象和CSS样式进行了绑定。
（其中CSS的属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 来命名）

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

不过直接绑定到一个样式对象通常更好，这会让模板更清晰简洁：

<div v-bind:style="styleObj"></div>
data: {
  styleObj: {
    color: 'red',
    fontSize: '13px'
  }
}

2.数组语法（style的数组绑定）

我们可以给v-bind:style传递一个数组，这个数组可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[activeClass, errorClass]"></div>

3.自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

（浏览器厂商们有时会给实验性的或者非标准的CSS属性和JavaScript API添加前缀，这样开发者就可以用这些新的特性进行试验（理论上地）。开发者们应该等到浏览器行为标准化之后再包含未加前缀的属性。）

4.多重值

可以为 style 绑定的CSS属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

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

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

附注：在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。