DOM 元素经常会动态地绑定一些 class 类名或 style 样式。

一、了解 v-bind 指令

v-bind 指令的主要用法是动态更新 HTML 元素上的属性，可使用 v-bind 指令绑定 class 和 style 。如下，示例：

 <div id="app">
 <a v-bind:href="url">我是一个链接</a>
 <img v-bind:src="imgUrl">
 <!-- 缩写为 -->
 <a :href="url">我是一个链接</a>
 <img :src="imgUrl">
 </div>
 <script>
 var app = new Vue({
 el: "#app",
 data: {
 url: 'https://www.github.com',
 imgUrl: 'http://bingbinlee.com/img.pang'
 }
 })
 </script>

链接的 href 属性和图片的 src 属性都被动态设置了，当数据变化时，就会重新渲染。

在数据绑定中，最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定，它们也是 HTML 属性，因此可以使用 v-bind 指令。只需要用 v-bind 计算出表达式最终的字符串也可以，不过有时候表达式的逻辑较为复杂，使用字符串拼接方法较难阅读和维护，所以 Vue.js 增强了对 class 和 sytle 的绑定。

二、绑定 class 的几种方式

2.1 对象语法

给 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, 当其为 true 时，div 会拥有类名 Active，为 false 时则没有，所以上例最终渲染完的结果是：

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

对象中也可以传入多个属性，来动态切换 class 。另外，: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="ststic active"></div>

当数据 isActive 或 isError 变化时，对应的 class 类名也会更新。比如当 isError 为 ture 时，渲染后的结果为：

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

当 :class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用 data 或 computed ，例如使用计算属性：

<div id="app">
 <div :class="classes"></div>
 </div>
 <script>
 var app = new Vue({
 el: "#app",
 data: {
 isActive: true,
 error: null
 },
 computed: {
 classes: function () {
 return {
 active: this.isActive && !this.error,
 'text-fail': this.error && this.error.type === 'fail'
 }
 }
 }
 })
 </script>

除了计算属性，也可以直接绑定一个 Object 类型得数据，或者使用类似计算属性的 methods 。

2.2 数组语法

当需要应用多个 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: ture,
 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>

示例中的样式 btn 会始终应用，当数据 size 不为空时，会应用样式前缀 btn- ，后加 size 的值；当数据 disabled 为真时，会应用样式 btn-disabled，所以该示例最终渲染的结果为：

<button class="btn btn-large btn-disabled"></button>

使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性。

三、在组件上使用

如果直接在组件上使用 class 或 :class ，样式规则会直接应用到这个组件的根元素上，例如声明一个简单的组件：

 Vue.component('my-component', {
 template: '<p class="article">我是个文本</p>'
 });

然后在调用这个组件时，应用上面的对象语法或数组语法给组件绑定 class ，以对象语法为例：

 <div id="app">
 <my-component :class="{ 'active': isActive }"></my-component>
 </div>
 <script>
 var app = new Vue ({
 el: "#app",
 data: {
 isActive: true
 }
 })
 </script>

最终组件渲染后的结果为：

<p class="article active">我是个文本</p>

这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的 props 来传递（这些用法同样适用于绑定内联样式 style 的内容）。

四、绑定内联样式

使用 v-bind:style （即 :style）可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法，看起来很像直接在元素上写 CSS ：

 <div id="app">
 <div :style="{ 'color': color, 'fontSize': fontSize + 'px'}">我是个文本</div>
 </div>
 <script>
 var app = new Vue ({
 el: "#app",
 data: {
 color: 'red',
 fontSize: 14
 }
 })
 </script>

CSS 属性名称使用驼峰命名 （camelCase）或短横分割命名（kebab-case），渲染后的结果为：

<div style="color: red; font-size: 14px;">红色文本</div>

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在 data 或 computed 里，以 data 为例改写下面的示例：

 <div id="app">
 <div :style="styles">我是一个红色的文本</div>
 </div>
 <script>
 var app = new Vue ({
 el: "#app",
 data: {
 styles: {
 color: 'red',
 fontSize: 14 + 'px'
 }
 }
 })
 </script>

应用多个样式对象时，可以使用数组语法：

<div :style="[styleA, styleB]">文本</div>

在实际业务中，:style 的数组语法并不常用，因为往往可以写在一个对象里面；而较为常用的应当时计算属性。

另外，使用 :style 时，Vue.js 会自动给特殊的 CSS 属性名称增加前缀，比如 transform 。