Vue 5. 条件渲染

最新推荐文章于 2023-08-09 21:43:02 发布

恋静

最新推荐文章于 2023-08-09 21:43:02 发布

阅读量178

点赞数

分类专栏： vue 文章标签： vue javascript js

本文链接：https://blog.csdn.net/xj89959853/article/details/105109695

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文主要包含以下知识点：

使用 v-if 进行条件渲染
使用 key 属性
使用 v-show 进行条件渲染
v-if 和 v-for 同时使用

使用 v-if 进行条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。

例如：

<body>
    <div id="app">
        <p v-if="seen1">根据 seen 的值为 true 或者 false 来决定是否能看到这个 p</p>
        <p v-if="seen2">如果 seen 不为布尔类型 , 则会自动转换为布尔类型</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                seen1: true,
                seen2: 'this is a test',
            }
        });
    </script>
</body>

效果：
在这里插入图片描述
可以将大段的 html 代码写在 template 里面，template 标签不会被渲染。

示例如下：

<body>
    <div id="app">
        <template v-if="ok">
            <h1>这是一个标题</h1>
            <ul>
                <li>apple</li>
                <li>banana</li>
                <li>pear</li>
            </ul>
            <p>Lorem ipsum dolor sit amet.</p>
        </template>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                ok: true
            }
        });
    </script>
</body>

效果：
在这里插入图片描述
和 JavaScript 类似，除了 v-if 以外，还对应有 v-else-if 以及 v-else

例如：

<body>
    <div id="app">
        <!-- type 为 0 - 4 的随机数 -->
        <div v-if="type === 1">
            type 的值为 1
        </div>
        <div v-else-if="type === 2">
            type 的值为 2
        </div>
        <div v-else-if="type === 3">
            type 的值为 3
        </div>
        <div v-else-if="type === 4">
            type 的值为 4
        </div>
        <div v-else>
            Not 1/2/3/4 is 0
        </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                type: Math.floor(Math.random() * 5)
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

使用 key 属性

Vue 为了能够尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

例如：

<body>
    <div id="app">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </template>
        <button @click='toggle'>toggle type</button>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                loginType: 'username'
            },
            methods: {
                toggle: function () {
                    this.loginType == 'username' ? this.loginType = 'email' : this.loginType = 'username';
                }
            },
        });
    </script>
</body>

效果：
在这里插入图片描述
但是，这样也不总是符合实际需求，所以 Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。

示例如下：

<body>
    <div id="app">
        <!-- 为控件提供了 key 值 -->
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
        <button @click='toggle'>toggle type</button>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                loginType: 'username'
            },
            methods: {
                toggle: function () {
                    this.loginType == 'username' ? this.loginType = 'email' : this.loginType = 'username';
                }
            },
        });
    </script>
</body>

效果：
在这里插入图片描述

使用 v-show 进行条件渲染

除了 v-if 可以实现条件渲染以外，还有一个指令 v-show 也可以实现条件渲染。

示例如下：

<body>
    <div id="app">
        <p v-if="seen">v-if 如果值为 false , 就不会渲染</p>
        <p v-show="seen">v-show 即使值为 false , 还是会渲染在页面上 , 只不过 display 为 none</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                seen: false
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
可以看到，v-if 是真正的条件渲染，如果数据为 false，则不会渲染到页面上。而 v-show 则是无论如何都会渲染到页面，只不过如果数据为 false 的话，该元素的 display 属性值为 none。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好。

v-if 和 v-for 同时使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

例如：

<body>
    <!-- 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。 -->
    <div id="app">
        <ul>
            <li v-for="item in items" v-if="item.completed">{{item.text}}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                items : [
                    {'text' : '吃饭' , 'completed' : false },
                    {'text' : '睡觉' , 'completed' : true },
                    {'text' : '打豆豆' , 'completed' : true },
                    {'text' : '玩游戏' , 'completed' : false },
                    {'text' : '逛街' , 'completed' : true }
                ]
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

总结

在 Vue 中可以使用 v-if 来实现条件渲染。
和 JavaScript 中类似的，除了 v-if 以外，还对应有 v-else-if 以及 v-else。
Vue 为了能够尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。可以为元素添加 key 属性来表示“这两个元素是完全独立的，不要复用它们”。
v-if 是真正的条件渲染，如果数据为 false，则不会渲染到页面上。而 v-show 则是无论如何都会渲染到页面，只不过如果数据为 false 的话，该元素的 display 属性值为 none。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。