vue中动态绑定class的方法,vue动态绑定样式class

Vue动态绑定Class的三种方法

1.三目运算符动态绑定Class
css

.red{ background-color: red; } .yellow{ background-color: yellow; }

三目运算符的规则：A = B?C:D 当B为真时 A赋值为C 相反 A赋值为D
html

<div id="app"> <!-- 缩写 --> <div :class="isActive?'red':'yellow'">三目运算写法</div> <!-- 完整语法 --> <!-- <div v-bind:class="isActive?'red':'yellow'">三目运算写法</div> --> </div>

javascript

new Vue({ el: "#app", data: { isActive:true //isActive=true 输出显示class样式是red // isActive:false //isActive=false 输出显示class样式是yellow } })

2.对象写法动态绑定Class
css

.red { background-color: red; } .fontsize{ font-size: 14px; } .color{ color:yellow; }

html

<div id="app"> <!-- 缩写 --> <div :class="ClassObj">对象写法</div> </div>

javascript

new Vue({ el: "#app", data: { ClassObj: { // 可以满足同时存在 red: true, //red为真，ClassObj赋值为red,反之不赋值 fontsize: false, //fontsize为false，ClassObj不赋值,反之ClassObj赋值为fontsize color: true, //color为true，ClassObj赋值为color,反之不赋值 } } })

3.数组写法动态绑定Class
css

.red { background-color: red; } .fontsize{ font-size: 14px; } .color{ color:yellow; }

html

<div id="app"> <!-- 缩写 --> <div :class="ClassArr">数组写法</div> </div>

javascript

var vm=new Vue({ el: "#app", data: { ClassArr:["red","fontsize"] }, mounted: function () { this.ClassArr.pop();//删除数组最后一个元素 this.ClassArr.push("color");//向数组的末尾添加一个元素,并返回新的长度。 } })

数组方法可以实现动态的添加和删除样式
以下列举数组的几种使用方法：

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

pop() 方法用于删除并返回数组的最后一个元素,并返回被删除数组元素

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

sort() 方法用于对数组的元素进行排序。

reverse() 方法用于颠倒数组中元素的顺序。

如有错误还请各路大神及时纠正，或者有其他的想法也可以互相讨论