2020/09/23 vue学习笔记——绑定html_class（数组语法）

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