Vue3基础+代码语法+例子大全（四）——条件渲染、列表渲染

参考官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

六、条件渲染

1、v-if

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

export default {
    data(){
        return{
            age:15
        }
    }
}

<!-- 只显示第一个“你好” -->
<p v-if="true">我已经成年了</p> 
<p v-if="false">我还是小孩</p>

<!-- 判断age -->
<p v-if="age>=18">我已经成年了</p> 
<p v-if="age<18">我还是小孩</p>

（1）<template>上的 v-if

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。

<template>
    <div>
        <!-- 在 <template> 元素上使用 v-if 条件渲染分组 -->
        <!-- 满足条件，才能显示 template 标签里的内容 -->
        <template v-if="age>=18">
            <p>hello</p>
        </template>
    </div>
</template>

（2）v-else

一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

<!-- 使用v-else -->
<p v-if="age>=18">我已经成年了</p> 
<p v-else>我还是小孩</p>

（3）v-else-if

v-else-if 提供的是相应于 v-if 的“else if 区块”，它可以连续多次重复使用。和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

<!-- 使用v-else-if -->
<p v-if="age>18">我已经成年了</p> 
<p v-else-if="age=18">今天刚好18岁</p>
<p v-else>我还是小孩</p>

2、v-show

v-show 用法基本一样：

<!-- v-show -->
<p v-show="sex=='man'">男生</p>
<p v-show="sex=='woman'">女生</p>

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。 

3、v-if  VS  v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

举个例子：设置一个按钮，查看元素属性的变化：

data(){
    return{
        isShow:true
    }
}

<template>
    <div>
        <!-- v-show 只是简单地切换元素的 display CSS属性，带有 v-show 的元素始终会被渲染并保留在 DOM 中，频繁切换状态 -->
        <!-- v-if：控制 dom 元素的创建和销毁。 当后面为false，对应的元素以及子元素都不会被渲染 -->
        <h2 v-if="isShow">1、v-if</h2>
        <h2 v-show="!isShow">2、v-show</h2>
        <button @click="isShow=!isShow">改变isShow</button>
    </div>
</template>

 运行后可以看到：

点击按钮后：

七、列表渲染

1、用 v-for 把一个数组映射为一组元素

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

举个例子：

data() {
  return {
    person:['张三','李四','王五']
  }
}

<li v-for="item in person" :key="item">{{item}}</li>

  

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。（加上下标）index就表示当前的索引值。

例如： 

<li v-for="(item,index) in person" :key="index">{{item}}--{{index}}</li>

  

可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法，效果是一样的：

例如：

<li v-for="(item,index) of person" :key="index">{{item}}--{{index}}</li>

2、在 v-for 里使用对象

可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

data() {
  return {
    personObj:{name:'张三',age:18,sex:'男'}
    }
  }
}

<ul>
    <li v-for="item in personObj" :key="item">{{item}}</li>
</ul>

  

可以通过提供第二个参数表示属性名 (例如 key)：

item表示键值，key表示键名：

<ul>
    <li v-for="(item,key) in personObj" :key="key">{{item}}--{{key}}</li>
</ul>

  

第三个参数表示位置索引（index）：

<ul>
    <li v-for="(item,key,index) in personObj" :key="index">
        {{item}}--{{key}}--{{index}}
    </li>
</ul>

  

3、通过 key 管理状态

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute：

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上：

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。

4、数组变化侦测

（1）变更方法

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

• push()  //给数组末尾添加元素。 this.list.push(8,0,9)
• pop()  //删除掉数组的最末尾的元素。 this.list.pop()
• shift()  //删除掉数组的第一位。 this.list.shift()
• unshift()  //从数组的第一位开始添加元素。 this.list.unshift(0,2)
• splice()  //删除、插入、替换元素。 （下列例子）
• sort()  //默认从小到大排序。 this.list.sort()
• reverse()  //翻转

例如：

export default {
    data(){
        return{
            list:[1,3,5,6,7]
        }
    },
    methods:{
        changeList:function(){
            // 通过索引值去修改数组
            
            // 第一个参数（都一样）：表示开始插入或者开始删除的元素的位置下标
            // 删除元素:
            // 第二个参数：表示删除几个元素（如果没有二个参数，会删除后面所有元素）
            // this.list.splice(1,2)
            // 插入元素：
            // 第二个参数：0（表示没有元素要删除），并且后面接上要插入的元素
            // this.list.splice(1,0,7,8,9)
            // 替换元素：
            // 第二个参数：表示替换几个元素,后面接上用于替换的元素
            this.list.splice(1,2,4,5)
        }
    }
}

<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item">{{item}}</li>
        </ul>

        <button @click="changeList">改变数组</button>
    </div>
</template>

 

点击按钮：

 

（2）替换数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：

this.items = this.items.filter((item) => item.message.match(/Foo/))

你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。

5、显示过滤或排序后的结果

有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性。

举例：

data() {
  return {
    numbers: [1, 2, 3, 4, 5]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(n => n % 2 === 0)
  }
}

<li v-for="n in evenNumbers">{{ n }}</li>

在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用以下方法：

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：

- return numbers.reverse()
+ return [...numbers].reverse()

6、在 v-for里使用值的范围

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

注意此处 n 的初值是从 1 开始而非 0。

7、在 <template> 中使用 v-for

与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

8、v-for 和 v-if

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

9、在组件上使用 v-for

我们可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)：

<MyComponent v-for="item in items" :key="item.id" />

但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props：

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用。