vue学习之v-bind动态绑定class

1.对象语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .active{
                color: red;
            }
        </style>
        
    </head>
    <body>
        <div id="app">
            <h2 class="active">{{message}}</h2>
            <!-- <h2 :class="active">{{message}}</h2> -->
            <!-- <h2 :class="{key1: value1}">{{message}}</h2> -->
            <h2 v-bind:class="{active: isActive , line: isLine}">{{message}}</h2>
            <h2 v-bind:class="getClass()">{{message}}</h2>
            <button type="button" v-on:click="btnClick()">点击按钮</button>
        </div>
    </body>
</html>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // v-bind的语法糖 :src
    const app = new Vue({
        el:'#app',//决定vue挂载到哪个对象
        data:{
            message:'你好',
            isActive: false,
            isLine: true,
        },
        methods:{
            btnClick:function(){
                this.isActive = !this.isActive;
            },
            getClass:function(){
                return {active:this.isActive,line:this.isLine}
            }
        }
    })
</script>

2.数组语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <h2 :class="[active,line]">{{message}}</h2>
            <h2 :class="getClass()">{{message}}</h2>
        </div>
    </body>
</html>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // v-bind的语法糖 :src
    const app = new Vue({
        el:'#app',//决定vue挂载到哪个对象
        data:{
            message:'你好',
            active: 'aaaaa',
            line: 'bbbbb',
        },
        methods:{
            getClass:function(){
                return [this.active,this.line]
            }
        }
    })
</script>

 

posted @ 2020-06-04 17:18  神女卑弥呼  阅读(235)  评论(0)    收藏  举报