操作页面标记元素的 class 和内联样式的style是数据绑定的一个常见需求。因为它们都是页面标记元素的属性(attribute)，即可以用 v-bind 来处理：只需要通过表达式得到字符串即可。不过，字符串拼接麻烦且易出错。在将 v-bind 用于 class 和 style 处理时，表达式结果的类型除了字符串之外，还可以是对象或数组。

一、HTML标记元素的Class之绑定

1.1 对象语法

v-bind:class的值表达式可以设置为一个对象，以便动态设置class样式。

<div id="app">
    <!--
        此处的:class等同于 v-bind:class，是一个缩写（语法糖）
    -->
   <div class="static" :class="{ 'active': isActive, 'error': hasError }"> Hello </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        isActive: true,
        hasError: true
    }
})

以上:class指令可以与普通的 class属性共存，:class指令的值表达式设置的对象中可以传入更多对象属性来动态切换多个 class。当 isActive 或者 hasError 变化时，class 列表将相应地更新，class 列表变为 "static active error"。渲染后的结果为 :

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

当:class指令的表达式过长或逻辑复杂时（一般当条件多于两个），可以使用 data 属性或 computed属性来设置表达式。

使用 data 属性：

<div :class="classObject"> Hello </div>

data: {
    classObject: {
        'active': true,
        'error': false
     }
}

渲染结果为：

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

使用 computed属性， 这是一个常用且强大的模式：

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

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

渲染结果为：

<div class="error"> Hello </div>

1.2 数组语法

当需要应用多个 class 时， 可以使用数组语法 ， 给:class 绑定一个数组，以应用一个 class 列表:

<div id="app">
    <div :class="[activeClass, errorClass]"> 爱校码 </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        activeClass: 'active',
        errorClass: 'text-danger'
    }
})

渲染后为：

<div class="active text-danger"> 爱校码 </div>

若根据条件切换列表中的 class，可以用三元表达式：

<div id="app">
    <div :class="[isActive ? activeClass : '', errorClass]"> 爱校码 </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        isActive: true, 
        activeClass: 'active',
        errorClass: 'error'
    }
})

渲染后为：

<div class="active error"> 爱校码 </div>

这样写将始终添加 error，不过只有在 isActive 是 true时，才添加active样式。当有多个条件的 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div id="app">
    <div :class="[{ active: isActive }, errorClass]"> 爱校码 </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        isActive: true,
        errorClass: 'error'
    }
})

渲染结果同上。

当然，也可以使用 data、 computed 和 methods 三种方法 ，以计算属性举例如下：

<div id="app">
    <div :class="classes"> 爱校码 </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        isActive: true,
        error: null
    },
    computed: {
        classes: function () {
            return [
               {
                 active: this.isActive && !this.error
               },
               {
                 'error': this.error && this.error === 'fatal'
               }
            ]
        }
    }
})

渲染结果为：

<div class="active"> 爱校码 </div>

使用计算属性给元素动态设置类名，尤其在开发重用的组件时，若表达式较长或逻辑复杂，应该优先使用计算属性。

1.3 在组件上使用

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

声明一个简单的组件如下：

Vue.component('my-component', {
     template: '<p class="ab cd">Hello</p>'
})

在使用它的时候添加一些class：

<my-component class="fo fm"></my-component>

渲染结果为：

<p class="ab cd fo fm">Hello</p>

对于v-bind:class的数据绑定也同样适用：

<div id="app">
    <my-component :class="{ active: isActive }"></my-component>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        isActive: true
    }
})

组件渲染后的结果为 :

<p class="ab cd active">Hello</p>

该用法仅在自定义组件的最外层是一个根元素时有效，若需要给具体的子元素设置类名时，这时使用组件的 props传递数据。

二、内联样式之绑定

使用 v-bind:style (:style，缩写语法糖) 可以给元素绑定内联样式。

2.1 对象语法

:style 看起来像 CSS，但其实质是一个 JavaScript 对象。CSS属性名可以用驼峰式或短横线分隔 来命名：

<div id="app">
    <!--
    此处的:style等同于 v-bind:style，是一个缩写（语法糖）
    -->
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">前端框架技术</div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        activeColor: 'red',
        fontSize: 30
    }
})

渲染后的结果为:

<div style="color: red; font-size: 30px;">前端框架技术</div>

直接绑定到一个样式对象，这会让模板更清晰：

<div id="app">
    <div :style="styleObj">JavaScript框架技术</div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        styleObj: {
            color: 'red',
            fontSize: '20px'
         }
    }
})

渲染后的结果：

<div style="color: red; font-size: 20px;">JavaScript框架技术</div>

同样的，对象语法常常结合计算属性使用：

<div id="app">
    <div :style="styles">JavaScript框架技术</div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        color: 'red',
        fontSize: '20px'
    },
    computed: {
        styles: function() {
            return {
                color: this.color,
                fontSize: this.fontSize
            }
        }
    }
})

渲染后的结果同上。

2.2 数组语法

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

<div :style="[styleA, styleB]">Vue框架</div>

在应用中，:style 的数组语法并不常用 ，而较为常用的是计算属性。

2.3 多重值

从版本2.3.0起，就可以为 style 绑定中的 属性 提供一个包含多个值的数组，常用于提供多个带前缀的值，如下：

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

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