绑定 HTML Class

绑定方式：

class="{{ className }}"    ||    v-bind:class="className"

使用文本插值的方式绑定 class时，由于输出的是文本，因此不能支持对象的输出，无法动态获取和改变 class。因此，要动态切换 class 的值，应该使用 v-bind:class 指令。因此下面也只是针对 v-bind:class 来讲。

对象语法

可以为 v-bind:class 传入一个对象表达式，以此实现动态切换 class：

<div class="test" v-bind:class="{ 'classA': isA, 'classB': isB }"></div>

data: {
    isA: true,
    isB: false
}
```  
==>


也可以直接绑定数据 data 里的一个对象：

```   
data: {
    classObj: {
        'classA': true,
        'classB': false
    }
}
```   
==>


## 数组语法
v-bind:class 也可以传入一个数组：

``` 
data: {
    classA: 'class-a',
    classB: 'class-b'
}

==>

<div class="class-a class-b"></div>

ps. 也可以使用三元表达式：

v-bind:style
CSS 属性名可以使用驼峰式（camelCase）或者短横分隔命名（kebab-case）

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

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

同样，也可以直接绑定一个 data 中的样式对象给它

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

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

可以同时将多个样式对象应用到一个元素上（注：可以实现样式的共用）

<div v-bind:style="[ styleObjA, styleObjB ]"></div>

Vue.js会自动侦测并添加相应的厂商前缀 if needed.