其他分享
首页 > 其他分享> > VUE3 之 条件渲染

VUE3 之 条件渲染

作者:互联网

目录

1. 概述

2. 条件渲染

3. 综述

4. 个人公众号


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,欢迎大家关注

标签:vue,const,渲染,app,VUE3,vm,条件,show,myDiv
来源: https://blog.csdn.net/u011181989/article/details/122243207