vue之样式绑定这些你知道吗

最新推荐文章于 2025-12-05 20:35:03 发布

原创最新推荐文章于 2025-12-05 20:35:03 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #经验分享

web之Vue 专栏收录该内容

6 篇文章

订阅专栏

本文通过实例演示了Vue中动态应用样式的方法，包括对象语法、数组语法及两者的结合使用，同时展示了如何使用v-bind绑定内联样式。

您可将以下代码c,v到编辑器打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        /* 对象语法  */
        
        .active {
            border: 2px solid pink;
            width: 200px;
            height: 200px;
        }
        
        .error {
            background-color: aqua;
        }
        /* 数组语法 */
        
        .active2 {
            border: 2px solid rgb(47, 27, 223);
            width: 200px;
            height: 200px;
        }
        
        .error2 {
            background-color: rgb(216, 29, 160);
        }
        /* 结合使用 */
        
        .test {
            color: #13e713;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 对象语法active为类名,isActive控制是否显示 -->
        <div :class="{active:isActive,error:isError}">对象语法</div>
        <button @click="qiehuan">对象语法切换</button>
        <hr>
        <!-- 数组语法 -->
        <div :class="[activeClass,errorClass]">数组语法</div>
        <button @click="shuzu">数组语法切换</button>
        <hr>
        <!-- 结合使用a类名不会覆盖 -->
        <div :class="[activeClass,errorClass,{test:isTest}]" class="a">结合使用</div>
        <button @click="shuzu">结合使用</button>
        <hr>
        <!-- style内联样式 -->
        <div :style="{border:a,width:b,height:c}">style内联样式</div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                //对象语法可以简化为obj{  isActive: true, isError: true,}
                isActive: true,
                isError: true,
                // 数组语法active2:类名,activeClass变量名,也可以简化为activeClass:['active2','error2']
                activeClass: 'active2',
                errorClass: 'error2',
                // 结合使用
                isTest: true,
                // style内联样式
                a: '1px solid blue',
                b: '200px',
                c: '200px'
            },
            methods: {
                // 对象语法切换
                qiehuan: function() {
                    this.isActive = !this.isActive;
                },
                // 数组语法的切换
                shuzu: function() {
                    this.activeClass = '';
                }
            }
        })
    </script>
</body>

</html>