Vue 5. 条件渲染

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

  • 使用 v-if 进行条件渲染
  • 使用 key 属性
  • 使用 v-show 进行条件渲染
  • v-ifv-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-ifv-for 同时使用

v-ifv-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>

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

总结

  1. Vue 中可以使用 v-if 来实现条件渲染。

  2. JavaScript 中类似的,除了 v-if 以外,还对应有 v-else-if 以及 v-else

  3. Vue 为了能够尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。可以为元素添加 key 属性来表示“这两个元素是完全独立的,不要复用它们”。

  4. v-if 是真正的条件渲染,如果数据为 false,则不会渲染到页面上。而 v-show 则是无论如何都会渲染到页面,只不过如果数据为 false 的话,该元素的 display 属性值为 none

  5. v-ifv-for 一起使用时,v-for 具有比 v-if 更高的优先级。

发布了7 篇原创文章 · 获赞 1 · 访问量 78
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览