在v-bind用于class和style时,Vue.js专门增强了它。表达式的结果类型除了字符串以外,还可以是对象或数组。
1、绑定HTML Class
(1)对象语法
如:
<div id="id1" class="static" v-bind:class="{'didi-orange':isRipe,'didi-green':isNotRipe}"></div>
new Vue({
el:'#id1',
data:{
isRipe:true,
isNotRipe:false
}
})
渲染为:
<div id="id1" class="static didi-orange"></div>
注:尽管可以用Mustache标签绑定class,比如class=”{{className}}”,不推荐这种写法和v-bind混用。
可以直接绑定数据中的一个对象,如:
<div id="example1" v-bind:class="classObj"></div>
var vm1 = new Vue({
el:"#example1",
data:{
classObj:{
'didi-orange':true,
'didi-green':false
}
}
})
还可以绑定一个返回对象的计算属性。这是一种常用且强大的模式。如:
<!--绑定一个返回对象的计算属性-->
<div id="example2" v-bind:class="classObj1"></div>
var vm2 = new Vue({
el:"#example2",
data:{
isActive:true,
error:null
},
computed:{
classObj1:function () {
return {
active:this.isActive && !this.error,
'text-danger':this.error && this.error.type === 'fatal'
}
}
}
})
(2)数组语法
如:
<!--数组语法-->
<div id="example3" v-bind:class="[activeClass,errorClass]"></div>
//数组语法
var vm3 = new Vue({
el:"#example3",
data:{
activeClass:'active',
errorClass:'text-danger'
}
})
渲染为:
<div id="example3" class="active text-danger"></div>
如果想根据条件切换列表中的class,则可以用三元表达式。如:
<div id="id3" v-bind:class="[active, isTrue ? text-danger : '']"></div>
只有isTrue 为true时才会添加text-danger。
当有多个条件class时,在Vue.js 1.0.19及以后版本中,可以在数组语法中使用对象语法。如:
<div id="id3" v-bind:class="[active,{didiOrange:isRipe,didiGreen:isNotRipe}]"></div>
2、绑定内联样式
(1)对象语法
如:
<div id="example4" v-bind:style="{color:activeClass, fontSize:fontSize+'px'}">aaaaaaaaaa</div>
//绑定内联样式
var vm4 = new Vue({
el:"#example4",
data:{
activeClass:'red',
fontSize:30
}
})
直接绑定到一个样式对象,让模板更清晰。如:
<div id="example5" v-bind:style="styleObj">bbbbbbbb</div>
var vm5 = new Vue({
el:"#example5",
data:{
styleObj:{
color:'green',
fontSize:'16px'
}
}
})
对象语法常常结合返回对象的计算属性使用,如:
<div id="id4" v-bind:style="ddfe"></div>
new Vue({
el:"#id4",
data:{
didiAge:4,
didiMember:6000
},
computed:{
ddfe:function () {
return {
color: this.didiAge>3 ? 'orange' : 'green',
fontSize:this.didiMember>1000 ? '20px' : '10px'
}
}
}
})
(2)数组语法
v-bind:style的数组语法可以将多个样式对象应用到一个元素上。如:
<div v-bind:style="[ddfe,didiFamily]"></div>