VUE-v-bind以及动态绑定Class和style

 

概述

v-bind通常用来绑定属性的，格式是v-bind：属性名 = "值"，简写:属性名 = "值" ；

v-bind主要就是动态更新DOM的属性的；

class作为DOM的属性当然也不例外，那么v-bind怎么动态更新class呢，分为三种方法:对象语法和数组语法，还有就是变量语法：

1）变量语法：v-bind：class = "变量"，变量形式 ,这里的变量的值，通常是在css定义好的类名；

2）数组语法：v-bind：class= "[变量1，变量2]" ，数组形式，其实跟上面差不多，只不过可以同时绑定多个class名；

3）对象语法：v-bind:class =  {classname1：boolean，classname2：boolean}，对象形式，这里的classname1（2）其实就是样式表中的类名，这里的boolean通常是一个变量，也可以是常量、计算属性等，这种方法也是绑定class最常用的方式。

 

 

在对象语法下

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

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


var myApp = new Vue({
    el:"#container",
    // 条件比较少
    data:{
	isName:true,
	isAge:false,
	name:"功守道"
    },
    // 条件多的时候
    computed:{
        addClass:function(){
	    return {
	        checked:this.isName&&!this.isAge
	    }
	}
    }
})

说明：

    1）当v-bind：class的表达式过长或者逻辑复杂（一般当条件多于两个的时候，可以考虑采用计算属性，返回一个对象）

 

 

数组语法

 

在数组语法下（需要绑定多个class名的时候，可以采用）：
1）值是一个数组(不论采用何种方法，最后值是一个数组就行)

2）在数组语法中可以使用对象语法，数组中的某一项可以是一个对象，当然当条件比较多的时候建议使用计算属性，返回一个数组即可；

3）数组中的值也可以直接就是class名，也可来源于data项

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

		// 数组语法：
		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
						}
					]
				}
			}
		})

 

绑定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"
					}
				}
			}
		})