vue 绑定class

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* 刷新的时候不显示 */
        [v-cloak]{
            display: none;
        }

        select{
            margin: 0 20px;
            width: 50px;
        }
        .a1{font-size: 50px;}
        .a2{color: #0094ff;}
        .a3{background-color: #800909;}
    </style>
</head>
<body>
    <div id="main">
        <h2 v-cloak class="a1 a2 a3">{{msg}}</h2>
        <h2 v-cloak v-bind:class="['a1','a2','a3']">{{msg}}</h2>
        <h2 v-cloak :class="['a1','a2','a3']">{{msg}}</h2>
        <h2 v-cloak :class="['a1','a2',{'a3':flag}]">{{msg}}</h2>
        <h2 v-cloak :class="style1">{{msg}}</h2>
        <h2 v-cloak style="font-size: 50px;color: #0094ff;">{{msg}}</h2>
        <h2 v-cloak :style="style2">{{msg}}</h2>
        <h2 v-cloak :style="[style2,style3]">{{msg}}</h2> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            // 要用哪一个div 即V层
            el : '#main',
            // 数据 即M层
            data : {
                msg:"hello vue",
                flag:false,
                style1:{a1:true,a2:false,a3:false},
                style2:{'font-size':' 50px','color': '#0094ff'},
                style3:{'background-color':'red'}
            },
            // 初始化页面函数
            mounted(){
                
            },
            // 方法 函数
            methods : {
                
                
            },

            })
    </script>
</body>
</html>
51cto：http://edu.51cto.com/center/course/lesson/index?id=290764
猜你喜欢
