Vue 中 class 与 style 绑定（五）
在数据绑定中，最常见的两个需求就是元素的样式名称 class 和 内联样式 style 的动态绑定，它们也是 html 的属性，因此可以使用 v-bind 指令。
1、绑定 class 的几种方式
（1）对象语法：
给 v-bind:class 设置一个对象，可以动态的切换 class，例如：
<template>
<div id="app">
<div :class="{'active': isActive}"></div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>
上面示例中，类名 active 依赖于数据 isActive，当其为 true 时， div 会拥有类名 Active ，为 false 时则没有：
渲染结果为：
<div class="active"></div>
对象中也可以传入多个属性，来动态切换 class。另外，:class 可以与普通 class 共存，例如：
<template>
<div id="app">
<div class="static" :class="{'active':isActive, 'error': isError}"></div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true,
isError: false
};
}
};
</script>
渲染结果为：
<div class="static active"></div>
当数据 isActive 或 isError 变化时，对应的 class 类名也会更新。比如当 isError 为 true 时，渲染后的结果为：
<div class="static active error"></div>
当 :class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用 data 或 computed，例如使用计算属性：
<template>
<div id="app">
<div :class="classes"></div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true,
error: null
};
},
computed: {
classes: function() {
return {
active: this.isActive && !this.error,
'text-color': true
}
}
}
};
</script>
渲染结果为：
<div class="active text-color"></div>
（2）数组语法：
当需要应用多个 class 时，可以使用数组语法，给 :class 绑定一个数组，应用一个 class 列表：
<template>
<div id="app">
<div :class="[activeCls, errorCls]"></div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
activeCls: 'active',
errorCls: 'error'
}
}
};
</script>
渲染的结果为：
<div class="active error"></div>
也可以使用三元表达式来根据条件切换 class，例如下面的示例：
<template>
<div id="app">
<div :class="[isActive ? activeCls : '', errorCls]"></div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true,
activeCls: 'active',
errorCls: 'error'
}
}
};
</script>
渲染结果为：
<div class="active error"></div>
样式 error 会始终应用，当数据 isActive 为真时，样式 active 才会被应用。class 有多个条件时，这些较为繁琐，可以再数组语法中使用对象语法：
<template>
<div id="app">
<div :class="[{'active': isActive}, errorCls]"></div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true,
errorCls: 'error'
}
}
};
</script>
渲染结果为：
<div class="active error"></div>
当然，与对象语法一样，也可以使用 data，computed 和 methods 三种方法，以计算属性为例：
<template>
<div id="app">
<div :class="classes"></div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
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，所以该示例最终渲染结果为：
<div class="btn btn-large btn-disabled"></div>
使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能的优先使用计算属性。
2、绑定内联样式
使用 :style 可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法，看起来很像直接在元素上写 css：
<template>
<div id="app">
<div :style="{'color': color, 'fontSize': fontSize + 'px'}">文本</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
color: 'red',
fontSize: 14
}
}
};
</script>
css 属性名称使用驼峰命名（camelCase）或短横分隔命名（kebab-case），渲染后的结果为：
<div style="color: red; font-size: 14px;">文本</div>
大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在 data 或 computed 里，以 data 为例改写上面的示例：
<template>
<div id="app">
<div :style="styles">文本</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
styles: {
color: 'red',
fontSize: 14 + 'px'
}
}
}
};
</script>
应用多个样式对象时，可以使用数组语法：
<div :style="[styleA, styleB]">文本</div>
参考：
《Vue.js 实战》
