vue class绑定

作者: 不睡觉呀 | 来源:发表于2018-05-16 21:28 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue class绑定</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background: blue;
        }
        .active{
            background: red;
        }
        div:active{
            background: black;  
        }
        p{
            width: 100px;
            height: 100px;
            background: blue;
        }
        .bgred{
            background-color: red;
        }
        .bgblack{
            background-color: black;
        }
    </style>
</head>
<body>

    
    <div id="a">
        <div class="tab" v-bind:class="{'active':active,'unactive':!active}">
            
        </div>
        <div v-bindclass="[classA,classB]"></div>
        <p class="bgred bgblack">
        

        </p>
        <hr>
        <p :class="{bgred:colorred,bgblack:aaa}">
            
        </p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#a",
            data:{
                active:true,
                colorred:true,
                aaa:true
                // 通过修改vm对象 的值来实现动态切换效果
                // v-bind也接受数组作为参数
                classA:'class-a',
                classB:'class-b'
            }
        })
    </script>
</body>
</html>