常用 v-bind动态绑定class(对象语法)

1.用法：

通过布尔值决定是否将该类名添加到class上

 <p :class="{类名1:布尔值，类名2：布尔值}"></p>

背景：通过判断给class添加类名，动态改变元素的样式。

    <style>
        .active{
            color: red;
        }
    </style>

在class前用v-bind的语法糖，动态绑定class的属性
给class属性创建一个对象，用键值对的方式给类名添加false或true
true则给class添加该类名，false则不添加
true和false可以动态改变

    <div id="app">
        <p :class="{active:isActive,line:isLine}">Hello</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                isActive : true,
                isLine : true
            }
        })
    </script>

image.png

动态改变isActive

image.png

p元素上的active属性消失

image.png

2.简化行间代码

行间的代码通过函数返回

    <div id="app">
        <p :class="getClasses()">Hello</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                isActive : true,
                isLine : true
            },
            methods : {
                getClasses : function () {
                    return {active:this.isActive,line:this.isLine}
                }
            }
        })
    </script>

案例

点击按钮，切换div的样式
触发绑定在button上的click的事件，在isChange函数中改变isActive的属性值。

        .inner{
            width: 50px;
            height: 50px;
            background-color: black;
        }
        .active{
            background-color: red;
        }

    <div id="app">
        <div class="inner" :class="{active:isActive}"></div>
        <button v-on:click = "isChange()">切换</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                isActive : true,
                isLine : true
            },
            methods : {
                isChange : function() {
                    //改变isActive的boolean值
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>