Vue实战--v-bind动态绑定Class和style

之前我们知道v-bind主要就是动态更新DOM的属性的，class作为DOM的属性当然也不例外，那么v-bind怎么动态更新class呢，分为两种方法:对象语法和数组语法：

一，在对象语法下：

 用v-vind动态设置class名，其值是一个对象（如上例子，当isName为真的时候就会存在类fontCol）:

HTML部分

<div id="container"><p :class="{fontCol:isName,setBack:!isAge}" class="weight">{{name}}</p><i :class="addClass">{{name}}真好看！</i></div>

JS部分

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部分

<div id="container1"><!-- 仅仅数组 --><div  :class="[huClas,heClas]">{{name}}</div><!-- 三元表达式 --><div :class="[isAge?huClas:heClas,ju]">{{name}},还行吧！</div><!-- 该模式下类名huijia一直存在，还有一个类名根据isAge的真假来判断去留 --><div :class="arrMethod">{{name}},有点不好看</div><!-- 计算属性huijia一直存在，其他的根据情况 --></div>

JS部分

// 数组语法：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，有两种写法一种是对象写法，如下例，一种是数组写法（不常用，数组中的每一项其实都是一个样式对象,其实直接写在一个对象里就行了。）；

<!-- 直接绑定 --><div id="container" :style="{color:color,fontSize:fontSize+'px'}">{{house}}<!-- 计算属性 --><h2 :style="style1">{{house}}</h2><!-- data中的 --><h3 :style="style">{{house}}</h3></div><script type="text/javascript" src="../../dist/vue.min.js"></script><script type="text/javascript">var myApp = new Vue({el:"#container",data:{house:"世家星城二期",color:"red",fontSize:18,style:{background:"yellow",fontSize:24+"px"}},// 计算属性computed:{style1:function(){return {fontSize:this.fontSize+"px",fontWeight:"italic",border:"1px solid #ff0000"}}}})

对于对象语法注意事项：

1.属性名一般采用驼峰命名法，属性值可以来源于data项，也可以是自己设置的固定值，
2.不建议直接在DOM中写对象，因为不容易维护，可以将样式对象写在data项中或者是计算属性中