vue动态绑定class的最常用几种方法

一、

• 当我们想给div绑定一个class名时

<div v-bind:class='class1'></div>

data{
	class1:class1
}

.class1{
	red solid 1px;
 }

二、

• 同时绑定多个可以使用数组的方法来绑定

<div v-bind:class='[class1,class2]'></div>

data{
	class1:class1,
    classs2:class2
}

.class1{
	red solid 1px;
 }
.class2{
	background:blue
}

渲染为

<div class="class1 class2"></div>

三、

• 指令中也可以写简单的表达式，如三元表达式

<div v-bind:class='isActive?class1:class2'></div>

也可以给class1和class2加上''，将变量改为字符串直接使用定义的样式，不需要在data中再声明

data{
   class1:class1,
   classs2:class2,
   isActive:true
}

四、

• 对象语法

<div v-bind:class='{class1:isActive}'></div>

上面的语法表示class1的存在与否取决于isActive的值

<div v-bind:class='{class1:isActive, class2:!isActive}'></div>

上面的语法表示isActive为true时绑定class1，为false时绑定class2

五、

• 数组嵌套对象的方法

<div v-bind:class='[{class1:isActive},class2]'></div>

class1为表达式，只有在 isActive 是 truthy时才添加，但是class2是始终添加的