VUE3 之 条件渲染

1. 概述

老话说的好：要锻炼逆向思维，人取我弃，人弃我取。

 

言归正传，今天我们来聊聊 VUE3 的条件渲染。

 

2. 条件渲染

2.1 v-if

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 创建一个vue应用实例
        data() {
            return {
                show: true
            }
        },
        template : '<div v-if="show">hello</div>'  
    });

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

当 show 变量为 false，则 div 元素会被清除

 

2.2 v-show

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 创建一个vue应用实例
        data() {
            return {
                show: false
            }
        },
        template : '<div v-show="show">hello</div>'
    });

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

当 show 变量为 false，div 元素会被加上 style="display: none;"

 

2.3 v-else

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 创建一个vue应用实例
        data() {
            return {
                show: false
            }
        },
        template : `
            <div v-if="show">hello1</div>
            <div v-else>hello2</div>
        `
   });

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

支持 if else 的写法

 

2.4 v-else-if

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 创建一个vue应用实例
        data() {
            return {
                show: false,
                show2 : true
            }
        },
        template : `
            <div v-if="show">hello1</div>
            <div v-else-if="show2">hello3</div>
            <div v-else>hello2</div>
        `
    });

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

支持 else if 判断

 

3. 综述

今天聊了一下 VUE3 的 条件渲染，希望可以对大家的工作有所帮助

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

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

 

4. 个人公众号

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

posted @   追风人聊Java  阅读(171)  评论(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
点击右上角即可分享
微信分享提示