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>
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() 方法用于颠倒数组中元素的顺序。
如有错误还请各路大神及时纠正，或者有其他的想法也可以互相讨论