概述
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"
}
}
}
})