VUE3 之 样式绑定

1. 概述

老话说的好：脚踏实地，从小事做起。

 

言归正传，今天我们来聊聊 VUE3 的样式绑定。

 

2. 样式绑定

2.1 样式例子

复制代码
　　<style>
        /* 颜色 */
        .color-red {
            color: red;
        }
        /* 字体 */
        .font-size-25 {
            font-size: 25px;
        }
        /* 居中 */
        .center {
            text-align: center;
        }
    </style>
复制代码

 

2.2 直接写 class 的值

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        template : '<div class="color-red">hello</div>'

    });

    // vm 就是vue应用的根组件
    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
复制代码

 

2.3 class 绑定字符串数据

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 创建一个vue应用实例
        
        data() {
            return {
                myColor : "color-red"

            }
        },

        template : '<div :class="myColor">hello</div>' 

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
复制代码

 

2.4 class 绑定对象数据

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 创建一个vue应用实例
        
        data() {
            return {
                myColorObject : {
                    "color-red" : true,
                    "font-size-25" : true
                }

            }
        },

        template : '<div :class="myColorObject">hello</div>' 

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
复制代码

 

 myColorObject 对象中，值为 true 代表使用此样式，为 false 代表不使用

 

2.5 class 绑定数组数据 

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 创建一个vue应用实例
        
        data() {
            return {

                myColorArr : ["color-red", "font-size-25" , {center : true}],

            }
        },


        template : '<div :class="myColorArr">hello</div>'

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
复制代码

 

myColorArr 数组中包含的样式都会被使用

 

2.6 直接写 style 的值

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        template : `
            <div style="color:yellow;">                
                hello
            </div>
        `
    });
    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
复制代码

 

2.7 style 绑定字符串数据

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 创建一个vue应用实例
        
        data() {
            return {
                myStyle : "color:yellow;"
            }
        },

        template : `
            <div :style="myStyle">                
                hello
            </div>
        `
    });
    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
复制代码

 

2.8 style 绑定对象数据

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 创建一个vue应用实例
        
        data() {
            return {
                myStyleObject : {
                    "color" : "blue",
                    "font-size": "25px"
                }
            }
        },
        template : `
            <div :style="myStyleObject">                
                hello
            </div>
        `

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
复制代码

 

3. 综述

今天聊了一下 VUE3  的 样式绑定，希望可以对大家的工作有所帮助

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，每天更新Java干货。

 

4. 个人公众号

追风人聊Java，欢迎大家关注

posted @   追风人聊Java  阅读(327)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示