v-bind动态绑定class

对象形式

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


    <div id="app">
        <p :class="{active:isactive}">学习vue的第二天</p>
        <!-- <p :class="getActive()">学习vue的第二天</p> -->
        <input type="button" value="切换" @click="changeActive">
    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    isactive: true,
                }
            },
            methods: {
                getActive() {
                    return {
                        active: this.isactive
                    }
                },
                changeActive() {
                    this.isactive = !this.isactive;
                }
            }
        })
    </script>
</body>

数组形式

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

    <div id="app">
        <h2 class="title" :class="['active','line']">{{msg}}</h2>
        <h2 class="title" :class="[active,line]">{{msg}}</h2>
        <h2 class="title" :class="addClass()">{{msg}}</h2>
    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: "你好啊",
                    active: "aaa",
                    line: "bbb"
                }
            },
            methods: {
                addClass() {
                    return [this.active, this.line]
                }
            }

        })

    </script>