今天要讲的是和网站外貌很有关係的 class 及 style 绑定

我们有几种方式为 DOM 设定样式，其中两种常用的是 .css 档案和 inline style，前者通常会使用 class 来作为 selector。

在 vue 中也有提供相关的绑定让你可以将样式的设定程式化。

Class 绑定

class 也是一种 DOM 属性，因此语法和属性绑定一样使用 v-bind:，但我们可以利用一些布林参数来切换 class

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

data: {  isActive: true}

我们用 isActive 这个 data 属性来切换 active 这个 class

v-bind:class 也可以和一般固定写死的 class 混用

<div  class="static"  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {  isActive: true,  hasError: false}

结果为

<div class="static active"></div>

和其他各种绑定一样，当 data 更新的时候也会做出相关的更新，例如将 hasError 设定为 true，则上述元素会变为

<div class="static active text-danger"></div>

注: js object key name 不能使用 hypen，例如 { hey-yo: 666 } 这是不合法的，如果要使用 hypen 的话必须明确用 string 当作 key，如 { 'hey-yo': 666 }，这就是为什么上面的 text-danger 要加引号其他的不用，当然其他的加引号也是没问题的。

我们也可以直接在 data 宣告一个 object 绑进去

<div v-bind:class="classObject"></div>

data: {  classObject: {    active: true,    'text-danger': false  }}

前一篇讲的 computed property 也是没问题的

<div v-bind:class="classObject"></div>

data: {  isActive: true,  error: null},computed: {  classObject: function () {    return {      active: this.isActive && !this.error,      'text-danger': this.error && this.error.type === 'fatal'    }  }}

Array syntax

有另外一个写法是传一个 array 进去

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

data: {  activeClass: 'active',  errorClass: 'text-danger'}

结果是

<div class="active text-danger"></div>

这种写法如果你想做 class 的切换可以用三元运算子

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

但这样很不直观，可以改用最一开始介绍的 object 的写法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

这属性也可以在自定义的 vue component 中使用，到时候介绍完 component 再回来看。

Inline style

一样是对 sylte 使用 v-bind: 来做绑定

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

data: {  activeColor: 'red',  fontSize: 30}

看起来和 css 非常相似，很方便，不过 css 中有一些用 hypen 连接的属性名称 (hypen 连接的变数命名方式称为 kebab-case)，需要改写成 camelCase，但其实也可以直接使用 kebab-case，只是需要记得加上引号 (和前面 class 使用 hypen 的例子一样，可以翻回去看。

一样可以做一个 object 丢进去

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

data: {  styleObject: {    color: 'red',    fontSize: '13px'  }}

看起来更像 css 了，感觉还蛮像我们做一个一个小的样式方块，然后需要的时候可以套用进去，还蛮有趣的。

v-bind:style 同样也支援 array syntax，用法和 class 一样

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

data: {  baseStyles: {    color: 'red',    fontSize: '13px'  },  blueText: {    color: 'blue',  }}

有一些 css 属性有针对浏览器相容性的 prefixes，在 Vue 2.3.0 以后的版本有支援这个部分

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

render 时只会显示浏览器支援的最后一个，例如多数浏览器目前应该都支援 flex 而不需要任何 prefixe，则上面的 code 执行结果为

<div style="display: flex"></div>

总结

Vue 提供给我们相当方便可以程式化样式套用的方法，可以更灵活且模组化地去设计 css。

下一次将更详细的介绍之前讲解过的条件式 render: v-if