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() 方法用于颠倒数组中元素的顺序。

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