VueDay07样式（绑定HTML class）

样式的绑定与使用：

1.通过对象的方式决定是否存在某个类

2.直接放置对象

3.放置数组

4.放置字符串

5.数组和对象混合使用

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .page{
                height: 200px;
                width: 200px;
                background:skyblue;
                display: none;
            }
            .active{
                display: block;
            }
            
        </style>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- <div class="page"></div> -->
            <!-- 通过对象的方式决定是否存在某个类 -->
            <div class="page"  :class="{active:isTure}" ></div>
            <!-- 直接放置对象 -->
            <div class="page"  :class="styleObj" ></div>
            <!-- 放置数组 -->
            <div class="page"  :class="styleArr" ></div>
            <!-- 放置字符串 -->
            <div class="page"  :class="styleStr"></div>
            <!-- 数组和对象混合使用 -->
            <div class="page"  :class="styleArrObj"></div>
        </div>
        <script type="text/javascript">
            var app =new Vue({
                el:"#app",
                data:{
                    isTure:true,
                    styleObj:{active:true,laochen:true,"cl-lg-6":true},
                    // 可直接用数组的方式进行添加和删除
                    styleArr:['col-xs-12','red-bg'],
                    styleStr:"abc cba qwer",
                    styleArrObj:['abc',{active:true}]
                },
                
            })
        </script>
    </body>
</html>

 

posted @ 2020-09-21 16:36  peifengyang  阅读(176)  评论(0)    收藏  举报