vue动态添加class

作者: 小太阳可可 | 来源:发表于2021-07-06 10:01 被阅读0次

<html>
<head>
    <title></title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
    <!-- 动态添加class -->
    <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
    <h2 :class="getClass()">{{message}}</h2>

    <h2 :class="[active,line]">{{message}}</h2>
    <h2 :class="getClasses()">{{message}}</h2>
</div>

<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">

    const app = new Vue({
        el: '#app',
        data:{
            message: 'hello World',

            isActive: true,
            isLIne: true,       

            active:'aa',
            line:'bb',
        },
        methods:{
            getClass(){
                return {
                    active: this.isActive,
                    line: this.isLine
                }
            },
            getClasses(){
                return [this.active, this.line]
            },
        }
    })
</script>
</body>
</html>

只供自己记录，如有错误，欢迎指出；