下载掌阅APP，畅读海量书库
立即打开
在项目开发的页面中，有很多列表效果需要动态显示。这在Vue中被称为列表渲染，可以通过v-for指令来实现。通过v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。
动态显示列表后，我们可以对列表进行添加、删除、修改、过滤、排序等操作。在通过v-for指令进行列表渲染时，有一个特别重要的属性key，本节会对其背后的原理专门进行分析。
当我们在模板中通过v-for指令来遍历数组显示列表时，指令的完整写法如下。
其中，item为被遍历的array数组的元素别名，index为数组元素的下标。如果不需要下标，则可以简化为“v-for="item in array"”。item和index的名称不是固定的，也可以使用其他的合法名称。
当我们使用v-for指令遍历一个对象时，遍历的是对象自身所有可遍历的属性，指令的完整写法如下。
其中，value为被遍历的obj对象的属性值，name为属性名。如果只需要属性值，则可以简化为“v-for="value in object"”。value和name的名称不是固定的，也可以使用其他的合法名称。
当v-for指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，指令的完整写法如下。
其中，value为从1开始到n为止依次递增的数值。
请思考下方代码的运行效果。
Vue代码如下。
JavaScript代码如下。
在上方代码中，分别演示了遍历的数据类型为数组、对象、数值的3种情况。这部分代码比较简单，我们直接来看页面效果，如图2-34所示。
与v-if指令类似，我们也可以在template标签上使用v-for指令，实现对多个标签的列表渲染。
具体代码如下。
上方代码在template标签上使用v-for指令实现了标签列表的循环，此时页面中的每个li和span都是一组，页面效果如图2-35所示。
图2-34 页面效果（1）
图2-35 页面效果（2）
此时我们可以利用v-for指令对数据进行循环，但是在阅读Vue官方文档时可以发现，Vue官方建议在使用v-for指令进行列表渲染时，最好同时指定唯一的key属性。这个key属性可以提高列表更新渲染的性能，且key属性的值最好不要使用下标，因为某个数组元素的下标是不稳定的，这样会影响内部DOM Diff算法的效率，甚至有可能产生错误的效果。key属性的值应该是数组元素对应的稳定的数值或字符串值，比如数组元素的id属性。现在对前面编写的人员列表代码进行完善，完整代码应该是下方这样的。
在实际项目开发中，在动态显示数组列表后，一般不会使其只作为展示存在，可能还需要对其进行增、删、改操作。
图2-36展示了一个简易的列表，初始显示张三、李四、王五共3个人员信息列表，请读者思考如何实现页面效果和需求。
图2-36 简易的列表
用户需求如下。
①点击“向第一位添加”按钮，在第一个人员信息列表前面添加一条随机产生的人员信息。
②点击“向最后一位添加”按钮，在最后一个人员信息列表后面添加一条随机产生的人员信息。
③点击“删除”按钮，直接删除对应的人员信息。
④点击“更新”按钮，将对应的人员信息替换为一条随机产生的人员信息。
实现代码如下所示。
Vue代码如下。
JavaScript代码如下。
在上方代码中为每个功能按钮都封装了相应的方法来实现对应的功能，从而实现对数组列表的增、删、改操作。其实每个功能方法内部，都是通过调用数组变更内部元素的方法（包括unshift、push和splice方法）来实现的。
那读者可能会想，如果不调用这些方法，直接通过下标来添加或者替换数组列表，能触发页面自动更新吗？答案是：在Vue2中不可以，但在Vue3中是完全没问题的。而通过调用数组变更内部元素的方法来操作元素，不管是Vue2还是Vue3，都是可以触发页面自动更新的。这是因为Vue内部对data中的数组的一系列变更方法进行了重写包装，被包装的变更方法一共有7个，分别是push、pop、shift、unshift、splice、sort和reverse方法，这7个方法内部会先对数组列表进行相应操作，再更新页面。
在Vue3中，如果想在最后一个人员信息列表后面添加一条人员信息，就可以使用下方代码。
如果将指定下标的人员信息替换为新添加的人员信息，就可以使用下方代码。
对列表进行过滤显示，是项目开发中常见的功能之一。列表过滤分为两种，分别是后台过滤和前台过滤。后台过滤是发送请求并提交条件参数给后台，由后台计算出过滤后的数组返回前台显示；而前台过滤是后台返回所有数据的数组，由前台进行过滤处理后显示。本节要实现的就是前台的列表过滤效果。
现在的需求为：当输入框没有任何输入时，显示所有人员的列表；当输入姓名时，下方会实时显示所有匹配的人员列表。初始页面效果如图2-37所示，过滤页面效果如图2-38所示。
图2-37 初始页面效果
图2-38 过滤页面效果
我们先对上方需求进行分析，然后编写实现代码。
页面由标题、输入框和列表组成。对于输入框输入的姓名，可以使用v-model指令将输入的数据收集到data对象的keyword属性中。下方显示的列表无疑是通过遍历数据得到的，但是这个数据不能直接是所有人员的列表（初始列表），它需要是一个根据keyword属性进行过滤后的列表。对于这部分的处理，我们可以先在data对象中定义包含所有人员的数组persons，再定义一个根据keyword属性进行过滤的计算属性filterPerons，其过滤的条件就是人员的name中包含keyword属性。
此时整体逻辑已经十分清晰，读者可以先尝试写出实现代码，再对照下方实现代码进行优化。如果思路还是不清晰，那么可以先对下方代码进行阅读思考，再独立写出实现代码。
完整实现代码如下。
Vue代码如下。
JavaScript代码如下。
2.6.3节对列表的过滤进行了相关讲解，对于大部分网站和用户来讲，这个功能并不够完善。下面就在2.6.3节案例的基础上对需求进行升级，现在的需求为：在对人员列表进行过滤的同时，提供排序的功能。需要增加3个按钮，分别是“年龄升序”“年龄降序”“原顺序”，点击“年龄升序”或“年龄降序”按钮，根据年龄对人员列表进行升序或者降序处理，点击“原顺序”按钮，人员列表变为原本顺序。下面就来实现新增的需求。
根据需求，我们需要实现如图2-39所示的页面效果。
图2-39 页面效果
下面对这个需求进行分析。过滤后的人员列表有3种状态：升序、降序和原顺序。这里可以设计一个data数据sortType来标识这3种状态。因为有3种状态，所以不能将其设计为布尔类型，number类型和字符串类型都可以满足，这里将其设计为number类型。用0代表原顺序，1代表降序，2代表升序，值指定为0。点击按钮时，sortType更新相应的数值。在filterPerons计算属性中，先根据keyword产生一个过滤后的数组，再根据sortType选择是否进行排序，从而决定是进行升序排列还是降序排列。
此时整体逻辑已经十分清晰，读者可以先尝试写出实现代码，再对照下方实现代码进行优化。如果思路还是不清晰，则可以先对下方代码进行阅读思考，再独立写出实现代码。
完整实现代码如下。
Vue代码如下。
JavaScript代码如下。
