数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。
就是通过计算，得到最后的值，可以是三元表达式。
比如：
:class="{ 'choose-bank-selected' : chooseBankFlag == index}"
不过，字符串拼接麻烦又易错。
因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
下面就介绍这几种绑定方式的使用：
1.对象语法：
我们可以传给:class一个对象，以动态的切换class。注意，:class指令可以与普通的class特性共存：
<div class="navbar" :class="{'class-A':isA, 'class-B':isB}"></div>
data: {
isA: true,
isB: false
}
此时渲染：
<div class="navbar class-A"></div>
通过控制isA 和 isB 的变化来控制class的显示和隐藏。
换种思考方式：我们可以把 class 直接赋值一个对象。
<div class="navbar" :class="classObj"></div>
data: {
classObject: {
'class-A': true,
'class-B': false
}
}
我们也可以在这里绑定一个返回对象的一个计算属性，所以这里的用法非常强大！
2.数组语法：
我们可以把一个数组传给 :class， 以应用一个class列表。
<div :class="[classA, classB]"></div>
data: {
classA: 'class-A',
classB: 'class-B'
}
此时渲染：
<div :class="[classA, classB]">
data: {
classA: 'class-A',
classB: 'class-B',
isB: true
}
如果想根据条件切换列表的class，可以用三元表达式
<div :class="[classA, isB ? classB : '']"></div>
可以控制isB来调节classB的显隐
不过，当有多个条件 class 时这样写有些繁琐。在 1.0.19+ 中，可以在数组语法中使用对象语法：
<div v-bind:class="[classA, { classB: isB, classC: isC }]">
3.绑定内联样式
:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）
<div :style="{ color: bgColor, fontSize:fontSize+ 'px'}"></div>
data: {
bgColor: 'white',
fontSize: 16
}
既然可以这么写，那么也就可以写成对象模式，这样会更清晰:
<div :style="styleObj"></div>
data: {
styleObj: {
color: '#ffffff',
fontSize: '16px'
}
}
同样的，对象语法也可以结合返回对象的计算属性使用
4.:class的用法
(1)
<style>
.red {
color: red;
}
.blue{
background: blue;
}
</style>
<!-- 此处的redVal 和 blueVal 是数据 -->
<span :class="[redVal, blueVal]">this is a span</span>
data: {
redVal: 'red', //此处的red 和 blue是类名
blueVal: 'blue'
}
(2)
<style>
.red {
color: red;
}
.blue{
background: blue;
}
</style>
<!-- 此处的red 和 blue 是类名 -->
<span :class="{ red: true, blue: false}">this is a span</span>
或者
<style>
.red {
color: red;
}
.blue{
background: blue;
}
</style>
<!-- 此处的red 和 blue 是类名 -->
<span :class="{ red:a, blue:b}">this is a span</span>
data: {
a: true,
b: false
}
(3) 将生效条件通过 一个对象绑定到数据上
<style>
.red {
color: red;
}
.blue{
background: blue;
}
</style>
<span :class="classObj">this is a span</span>
data: {
classObj: {
red: true,
blue: false
}
}
5. :class 通过计算属性
<div :class="_module"></div>
data(){
return {
classObj: {
m_class="",
hasClass: false
}
}
},
computed: {
_module: { //对_module变量，进行计算
get: function (){
if (this.classObj.hasClass){
return this.classObj.m_class
} else {
return this.classObj.m_class = "module_" + (new Date().getTime())
}
}
}
}
