绑定html_class(数组语法)
我们可以把一个数组传给 v-bind:class
,以应用一个 class
列表:
<style>
.active{
width:100px;
height:100px;
border:1px solid #ccc;
}
.text-danger{
color:red;
}
.bg{
background-color:azure;
}
</style>
<div id="app">
<div v-bind:class="[cls1,cls2,cls3]">1</div>
</div>
var vm = new Vue({
el: '#app',
data: {
msg:"",
cls1:"active",
cls2:"text-danger",
cls3:"bg"
}
});
如果你也想根据条件切换列表中的 class,可以用三元表达式:
<div id="app">
<div v-bind:class="[cls1,isActive?cls2:'',cls3]">1</div>
</div>
var vm = new Vue({
el: '#app',
data: {
msg:"",
cls1:"active",
cls2:"text-danger",
cls3:"bg"
isActive:true
}
});
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
<div id="app">
<div v-bind:class="[cls1,{'text-danger':isActive},cls3]">1</div>
</div>
但是这样还是显得有些冗长,[cls1,{'text-danger':isActive},cls3]
可以将这一部分设置一个对象,放入到属性中:
<div id="app">
<div v-bind:class="classObjArr">1</div>
</div>
var vm = new Vue({
el: '#app',
data: {
msg:"",
isActive:true,
isA:true,
classObjArr:["active",{'text-danger':true},"bg"]
}
});