vue---class绑定

Posted 2021-02-18 by-young

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

css内联样式变量拼接

    <body>
        <div id="app">
            <div style="width: 100px;height: 100px;background-color: bisque;"></div>
            <!-- css内联样式变量拼接 -->
            <div style="width: 100px;height: 100px;background-color: bisque;"
            :style="{border:borderWidth+‘px solid red‘}"></div>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    borderWidth:50
                }
            })
        </script>
    </body>

以上是关于vue---class绑定的主要内容，如果未能解决你的问题，请参考以下文章

vue---class绑定

vue class与style 绑定详解——小白速会

vue class与style绑定

4.vue class 绑定- model基础应用

VUE：class与style强制绑定