Vue实战--v-bind以及动态绑定Class和style（转）

Vue实战--v-bind以及动态绑定Class和style（转）
之前我们知道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部分
1<div id="container">
2<p :class="{fontCol:isName,setBack:!isAge}" class="weight">{{name}}</p>
3<i :class="addClass">{{name}}真好看！</i>
4</div>
JS部分
1var myApp = new Vue({
2 el:"#container",
3 // 条件⽐较少
4 data:{
5 isName:true,
6 isAge:false,
7 name:"功守道"
8 },
9 // 条件多的时候
10 computed:{
11 addClass:function(){
12 return {
13 checked:this.isName&&!this.isAge
14 }
15 }
16 }
17 })
注意：既然是⼀个对象，那么该对象内的属性可能不唯⼀，但总是每⼀项为真的时候，对应的类名就会存在。

1.通过v-bind更新的类名和元素本⾝存在的类名不冲突，可以优雅的共存
2.不过当v-bind：class的表达式过长或者逻辑复杂（⼀般当条件多于两个的时候，可以考虑采⽤计算属性，返回⼀个对象）
⼆,在数组语法下（⼀般⽤在当需要绑定多个class名的时候）：
1.值是⼀个数组(不论采⽤何种⽅法，最后值是⼀个数组就⾏)
2.在数组语法中可以使⽤对象语法，数组中的某⼀项可以是⼀个对象，当然当条件⽐较多的时候建议使⽤计算属性，返回⼀个数组即可（例⼦略），
3.数组中的值也可以直接就是class名，也可来源于data项
HTML部分
1<div id="container1">
2<!-- 仅仅数组 -->
3<div :class="[huClas,heClas]">{{name}}</div>
4<!-- 三元表达式 -->
5<div :class="[isAge?huClas:heClas,ju]">{{name}},还⾏吧！</div>
6<!-- 该模式下类名huijia⼀直存在，还有⼀个类名根据isAge的真假来判断去留 -->
7<div :class="arrMethod">{{name}},有点不好看</div>
8<!-- 计算属性huijia⼀直存在，其他的根据情况 -->
9</div>
JS部分
1// 数组语法：
2var myApp1 = new Vue({
3 el:"#container1",
4// 当条件⽐较少的时候
5 data:{
6 judge1:false,
7 isAge:true,
8 name:"功夫熊猫",
9 huClas:"haha",
10 heClas:"heihei",
11 ju:"huijia"
12 },
13// 条件多的时候
14 computed:{
15 arrMethod:function(){
16return [
17this.ju,
18 {
19 heClas:this.judge1&&this.isAge,
20 huClas:this.isAge
21 }
22 ]
23 }
24 }
25 })
26
v-bind绑定style属性（不常⽤,仅作了解）
v-bind绑定style，有两种写法⼀种是对象写法，如下例，⼀种是数组写法（不常⽤，数组中的每⼀项其实都是⼀个样式对象,其实直接写在⼀个对象⾥就⾏了。

）；
1<!-- 直接绑定 -->
2<div id="container" :style="{color:color,fontSize:fontSize+'px'}">
3 {{house}}
4<!-- 计算属性 -->
5<h2 :style="style1">{{house}}</h2>
6<!-- data中的 -->
7<h3 :style="style">{{house}}</h3>
8</div>
9<script type="text/javascript" src="../../dist/vue.min.js"></script>
10<script type="text/javascript">
11var myApp = new Vue({
12 el:"#container",
13 data:{
14 house:"世家星城⼆期",
15 color:"red",
16 fontSize:18,
17 style:{
18 background:"yellow",
19 fontSize:24+"px"
20 }
21 },
22// 计算属性
23 computed:{
24 style1:function(){
25return {
26 fontSize:this.fontSize+"px",
27 fontWeight:"italic",
28 border:"1px solid #ff0000"
29 }
30 }
31 }
32 })
对于对象语法注意事项：
1.属性名⼀般采⽤驼峰命名法，属性值可以来源于data项，也可以是⾃⼰设置的固定值，
2.不建议直接在DOM中写对象，因为不容易维护，可以将样式对象写在data项中或者是计算属性中。