DOM 元素经常会动态绑定一些 class 类名 或 style 样式，现在介绍使用 v-bind 指令来绑定 class 和 style 的多种方法。
了解 v-bind 指令
在之前已经介绍了指令 v-bind 的基本用法以及它的语法糖，它的主要用法是动态更新 HTML 元素上的属性，回顾之前的一个样例：
<div id="app">
<a v-bind:href="url">百度一下</a>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: 'https://www.baidu.com'
}
})
</script>
在数据绑定中，最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定，它们也是 HTML 的属性，因此可以使用 v-bind 指令。
绑定 class 的几种方式
对象语法
给 v-bind:class 设置一个对象，可以动态地切换 class，例如：
<div id="app">
<div> :class="{ 'active' : isActive }"</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
上面示例中，类名 active 依赖数据 isActive。另外 :class 可以与普通 class共存，例如：
<div id="app">
<div class="static" :class="{ 'active' : isActive, 'error': isError }"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
isError: false
}
})
</script>
:class 内的表达式每项如果为真，对应的类名就会加载，上面的渲染后的结果为：
<div class="static active"></div>
当数据 isActive 或 isError 变化时，对应的 class 类名也会更新。比如当 isError 为 true 时，渲染后的结果为：
<div class="static active error"></div>
当 :class 的表达式过长或逻辑复杂时，可以使用 data 或者 computed，或者类似计算属性的 methods 这三种方法。
使用 data：
<div id="app">
<div class="static" :class="classes"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classes: {
active: true,
error: false
}
}
})
</script>
使用 computed：
<div id="app">
<div class="static" :class="getClasses"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
},
computed: {
getClasses: function () {
return {
active: true,
error: false
}
}
}
})
</script>
数组语法
当需要应用多个 class 时，可以使用数组语法，给 :class 绑定一个数组，应用一个 class 列表：
<div id="app">
<div :class="[ activeCls, errorCls ]"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
activeCls: 'active',
errorCls: 'error'
}
})
</script>
渲染后的结果为：
<div class="active error"></div>
也可以使用三元表达式来根据条件切换 class，例如：
<div id="app">
<div :class="[isActive ? activeCls : '', errorCls]"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
activeCls: 'active',
errorCls: 'error'
}
})
</script>
样式 error 会始终应用，当数据 isActive 为真时，样式 active 才会被应用。class 有多个条件时，这样写较为繁琐，可以在数组语法中使用对象语法。
<div id="app">
<div :class="[ {'active': isActive}, errorCls ]"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
errorCls: 'error'
}
})
</script>
当然，与对象语法一样，也可以使用data、computed 和 methods 三种方法，以计算属性为例：
<div id="app">
<button :class="classes"></button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: 'large',
disabled: true
},
computed: {
classes: function () {
return [
'btn',
{
['btn-' + this.size]: this.size !== '',
['btn-disabled']: this.disabled
}
]
}
}
})
</script>
该示例最终渲染结果为：
<button class="btn btn-large btn-disabled"></button>
使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用属性。
绑定内联样式
使用 v-bind:style（即 :style ）可以给元素绑定内联样式，方法与 :class 类型，也有对象语法和数组语法，看起来很像直接在元素上写 CSS：
<div id="app">
<div :style="{ 'color': color, 'fontSize': fontSize }">我是文本</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
color: 'red',
fontSize: 20 + 'px'
}
})
</script>
CSS 属性名称使用驼峰命名（cameCase）或短分隔符命名（kebab-case），渲染后的结果为：
<div style="color: red, font-size: 20px">我是文本</div>
大多数情况下，直接写一长串的样式不易于阅读和维护，所有一般写在d ata 或 computed 里，以 data 为例：
<div id="app">
<div :style="styles">我是文本</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
styles: {
color: 'red',
fontSize: 20 + 'px'
}
}
})
</script>
应用多个样式对象时，可以使用数组语法：
<div :style="[styleA, styleB]"> 我是文本 </div>
在实际业务中，:style 的数组语法并不常用，因为往往可以写在一个对象里，而较为常见的应当是计算属性。
另外，使用 :style 时，Vue.js 会自动给特殊的 CSS 属性名称添加前缀，比如 transform。