VUE3 之条件渲染

最新推荐文章于 2024-07-02 16:26:35 发布

追风人聊Java

最新推荐文章于 2024-07-02 16:26:35 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：前端 html5 vue.js

本文链接：https://blog.csdn.net/u011181989/article/details/122243207

版权

前端专栏收录该内容

33 篇文章 3 订阅

订阅专栏

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 判断