Vue实战--v-bind以及动态绑定Class和style
v-bind通常用来绑定属性的，格式是v-bind：属性名 = "值"，简写:属性名 = "值"
之前我们知道v-bind主要就是动态更新DOM的属性的，class作为DOM的属性当然也不例外，那么v-bind怎么动态更新class呢，分为三种方法:对象语法和数组语法，还有就是变量语法：
变量语法：v-bind：class = "变量"，变量形式 ,这里的变量的值，通常是在css定义好的类名；
数组语法：v-bind：class= "[变量1，变量2]" ，数组形式，其实跟上面差不多，只不过可以同时绑定多个class名；
对象语法：v-bind:class = {classname1：boolean，classname2：boolean}，对象形式，这里的classname1（2）其实就是样式表中的类名，这里的boolean通常是一个变量，也可以是常量、计算属性等，这种方法也是绑定class最常用的方式。
一，在对象语法下：
用v-vind动态设置class名，其值是一个对象（如上例子，当isName为真的时候就会存在类fontCol）:
HTML部分
{{name}}
{{name}}真好看！
var myApp = new Vue({
el:"#container",
// 条件比较少
data:{
isName:true,
isAge:false,
name:"功守道"
},
// 条件多的时候
computed:{
addClass:function(){
return {
checked:this.isName&&!this.isAge
}
}
}
})注意：既然是一个对象，那么该对象内的属性可能不唯一，但总是每一项为真的时候，对应的类名就会存在。
1.通过v-bind更新的类名和元素本身存在的类名不冲突，可以优雅的共存2.不过当v-bind：class的表达式过长或者逻辑复杂（一般当条件多于两个的时候，可以考虑采用计算属性，返回一个对象）
二,在数组语法下（一般用在当需要绑定多个class名的时候）：
1.值是一个数组(不论采用何种方法，最后值是一个数组就行)
2.在数组语法中可以使用对象语法，数组中的某一项可以是一个对象，当然当条件比较多的时候建议使用计算属性，返回一个数组即可（例子略），
3.数组中的值也可以直接就是class名，也可来源于data项
HTML部分
{{name}}
{{name}},还行吧！
{{name}},有点不好看
// 数组语法：
var myApp1 = new Vue({
el:"#container1",
// 当条件比较少的时候
data:{
judge1:false,
isAge:true,
name:"功夫熊猫",
huClas:"haha",
heClas:"heihei",
ju:"huijia"
},
// 条件多的时候
computed:{
arrMethod:function(){
return [
this.ju,
{
heClas:this.judge1&&this.isAge,
huClas:this.isAge
}
]
}
}
})v-bind绑定style属性（不常用,仅作了解）
v-bind绑定style，有两种写法一种是对象写法，如下例，一种是数组写法（不常用，数组中的每一项其实都是一个样式对象,其实直接写在一个对象里就行了。）；
{{house}}
{{house}}
{{house}}