【Vue】条件渲染 & 列表渲染

JS.Huang

已于 2022-10-17 23:36:37 修改

阅读量743

点赞数

分类专栏： Vue 笔记文章标签： javascript vue.js 前端

于 2022-02-08 03:10:52 首次发布

本文链接：https://blog.csdn.net/Superman_H/article/details/122817325

版权

Vue 笔记专栏收录该内容

28 篇文章 7 订阅

订阅专栏

条件渲染

`v-show`

相当于设置元素 display: none。就是说，不论是否显示，浏览器都会渲染。适用于切换频率较高的场合
v-show 不支持与 <template> 标签元素一起使用

<div id="app">
    <p v-show="show">v-show 的使用</p>
    <!-- 属性值可以是 JS 表达式，但返回的必须是布尔值 -->
    <p v-show="2 == 2">v-show 的使用</p>
</div>

let vm = new Vue({
    el: "#app",
    data: { show: true }
});

`v-if`

v-if、v-else-if、v-else

不显示的话，浏览器则不渲染。适用于切换频率低的场合

<p v-if='vIf'>通过</p>
<p v-else>不通过</p>

let vm = new Vue({
    el: "#app",
    data: { vIf: true }
});

当然，属性值也可以是 JS 表达式：

<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 80 && score &lt; 90">良好</p>
<p v-else-if="score >= 60 && score &lt; 80">及格</p>
<p v-else>不及格</p>

let app = new Vue({
    el: "#app",
    data: { score: 100 },
});

注意：v-if、v-else-if、v-else 必须顺序使用，中间不可插入其他标签！否则后面的 v-else-if / v-else 都不会奏效！

`template`

如果我们需要一次性 [隐藏] / [显示] 多个标签，我们可以使用 v-if 配合 template 标签使用
注意：v-show 不能配合 template 标签使用

<div id="app">
    <template v-if="isShow">
        <div>里面有很多个标签</div>
        <div>里面有很多个标签</div>
        <div>里面有很多个标签</div>
    </template>
</div>

let vm = new Vue({
    name: "Demo",
    el: "#app",
    data: { isShow: false },
})

`v-if` vs `v-show`

在切换过程中，v-if 条件块内的事件监听器和子组件会适当地被销毁和重建
v-if 是惰性的，需要显示时才会渲染条件块；一直不显示，则一直不渲染
相比之下，v-show 就简单得多 —— 不管是否需要显示，元素总是会被渲染，并且只是简单地基于 CSS 进行切换
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在显示条件基本不变，则使用 v-if 较好
template 只能配合 v-if 使用，不能配合 v-show 使用

key 值

Vue 会尽可能地复用已有元素，而不是从头开始渲染

<button @click="loginType = !loginType"> 切换 loginType </button>
<template v-if="loginType">
    <label>Username</label>
    <input placeholder="Enter your username">
</template>
<template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
</template>

let vm = new Vue({
    el: "#app",
    data: { loginType: true }
});

我们先在输入框中输入一些信息，然后点击 [切换 loginType]。可以发现，输入框的内容没有被清空。
因为两个模板使用了相同的元素，<input> 标签元素不会被替换掉 —— 仅仅是替换了它的 placeholder 文本

如果我们想阻止复用，重新渲染元素，我们可以给需要的标签设置 key 属性，属性值为该标签的唯一标识
注意：key 值的类型只能是 number / string

<template v-if="loginType">
    <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>

现在，每次切换时，输入框都将被重新渲染。
注意，此时 <label> 元素仍会被高效地复用，因为它们没有设置 key 属性（只重新渲染了里面的文本，因为文本不一样）

列表渲染

数据的显示

遍历对象：v-for = (value, key, index) in/of 对象

注意：① 如果读取了不存在的对象属性 (属性值为 undefined)，Vue 不会显示（换句话说，Vue 不显示 undefined !!! ）
② 设置 v-for 的元素自身 (上例是 li 标签元素) 也能访问 value、key、index 的值

<ul>
    <li v-for="(value, key, index) of obj" :class="key + value + index">
        <p>{{value}} - {{key}} - {{index}}</p>
    </li>
</ul>

遍历数组：v-for = (item, index) in/of 数组

<li v-for="(item, index) of arr">
    <p>{{item}} - {{index}}</p>
</li>

遍历字符串：v-for = (char, index) in/of 字符串

<li v-for="(char, index) of str">
    <p>{{char}} - {{name}}</p>
</li>

遍历到指定数字：v-for = (num, index) in/of 数字

<!-- 遍历 1 ~ 10，下标为 0 ~ 9 -->
<li v-for="(num, index) of 10">
    <p>{{num}} - {{index}}</p>
</li>

v-for & v-if 的配合使用

当 v-if 与 v-for 一起使用时：
在 Vue2 中，v-for 的优先级比 v-if 高 (先执行)，所以 v-if 里面可以获取到 v-for 的数据 item
在 Vue3 中，v-for 的优先级比 v-if 低！！！
但是，极不推荐把 v-if 和 v-for 同时用在同一个元素上

我们可以使用计算属性 computed 过滤数据，然后在模版上使用过滤后的数据

<ul>
    <li v-for="item of arr2">
        <p>姓名:{{item.name}}、年龄:{{item.age}}</p>
    </li>
</ul>

let vm = new Vue({
    el: "#app",
    data: {
        arr1: [
            { name: "superman", age: 22 },
            { name: "superwoman", age: 21 },
            { name: "superSon", age: 17 }
        ]
    },
    computed: {
        arr2() {
            return this.arr1.filter(item => item.age > 18);
        }
    },
});

我们也可以配合 template 标签使用（此时的 key 值需要设置在显示的标签元素上，下例是 li 标签元素）：

<ul>
    <template v-for="item of arr1">
        <li v-if="item.age >= 18">
            <p>姓名:{{item.name}}、年龄:{{item.age}}</p>
        </li>
    </template>
</ul>

绑定 `key` 属性

:key="元素的唯一标识" & diff 算法

Vue 会尽可能地复用已有的真实 DOM：

如果，旧虚拟 DOM 中找到与新虚拟 DOM 相同的 key 属性值，则判断：
① 虚拟 DOM 中内容没变，直接使用之前的真实 DOM；
② 虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM

如果，旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key，则：
创建新的真实 DOM，随后渲染到页面

<button @click="add">点击添加新数据项</button>
<ul>
    <!-- 此处使用元素的唯一标识作为 key 的属性值 -->
    <li v-for="(item, index) in arr" :key="item.id">
        <span>姓名: {{item.name}}、 index: {{index}}、 id: {{item.id}}</span> <input type="text">
    </li>
</ul>

let vm = new Vue({
    el: "#app",
    data: {
        arr: [
            { id: 1, name: "谢老师", },
            { id: 2, name: "黄大力", },
            { id: 3, name: "朱古力", }
        ]
    },
    methods: {
        add() { // 在数组头部添加新元素
            this.arr.unshift({ id: 4, name: "美少女" });
        }
    }
});

如果不设置 key 属性，则默认为 :key="index"：（脚手架中，不设置 key 属性会直接飘红）
此时，若对数据进行一些改变 DOM 顺序的操作 (eg：逆序添加、逆序删除) 上，会产生没必要的真实 DOM 更新，影响效率；
如果结构中还包含输入类的 DOM，还会出现渲染错误（因为 DOM 对应的索引发生了变化！！！）

<button @click="add">点击添加新数据项</button>
<ul>
    <!-- 此处没有使用元素的唯一标识作为 key 的属性值，对于会改变 DOM 顺序的操作，会出现渲染错误 -->
    <li v-for="(item, index) in arr" :key="index">
        <span>姓名: {{item.name}}、 index: {{index}}、 id: {{item.id}}</span> <input type="text">
    </li>
</ul>

所以，如果后期需要对数据项进行操作的话，最好设置 key 值为数据项的唯一标识！！！
如果只是简单地展示数据，则用 index 作为 key 值也没有问题~

JS.Huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】条件渲染 & 列表渲染

# 条件渲染## `v-show`- 相当于设置元素 `display: none`。就是说，不论是否显示，浏览器都会渲染。适用于切换频率较高的场合- `v-show` 不支持与 `` 标签元素一起使用```html v-show 的使用 v-show 的使用
复制链接

扫一扫