vue---class绑定

vue绑定class

<style type="text/css">
            .active{
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
</style>
<div id="app">
            <!-- 通过对象的方式决定是否存在某个类 -->
            <div :class="{active:isTrue}"></div>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    isTrue:true
                }
            })
        </script>
    </body>

直接放置对象、放置数组、以及混合使用

    <body>
        <div id="app">
            <!-- 直接放置对象 -->
            <div class="page" :class="styleObj"></div>
            <!-- 放置数组 -->
            <div class="page" :class="styleArr"></div>
            <!-- 混合使用     -->
            <div class="page" :class="styleArrObj"></div>
            </div>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    // 带-符号必须用双引号
                    styleObj:{active:true,"col-lg-6":true},
                    styleArr:['col-xs-6','red-bg'],
                    styleArrObj:['abc',{active:true}]
                }
            })
        </script>
    </body>

猜你喜欢