5.1.3　v-for

使用v-for指令可以对数组、对象进行循环，来获取到其中的每一个值。

1．v-for指令遍历数组

使用v-for指令，必须使用特定语法alias in expression，其中items是源数据数组，而item则是被迭代的数组元素的别名，具体格式如下：

下面看一个示例，使用v-for指令循环渲染一个数组。

【例5.4】v-for指令遍历数组（源代码\ch05\5.4.html）。

在浏览器中运行程序，按F12键打开控制台并切换到“Elements”选项，结果如图5-5所示。

图5-5　v-for指令遍历数组

<li v-for="item of nameList">

在v-for指令中，可以访问所有父作用域的属性。v-for还支持一个可选的第二个参数，即当前项的索引。例如，修改上面示例，添加index参数，代码如下：

在浏览器中运行程序，结果如图5-6所示。

图5-6　v-for指令第二个参数

2．v-for指令遍历对象

遍历对象的语法和遍历数组的语法是一样的：

其中object是被迭代的对象，value是被迭代的对象属性的别名。

【例5.5】v-for指令遍历对象（源代码\ch05\5.5.html）。

在浏览器中运行程序，结果如图5-7所示。

图5-7　v-for指令遍历对象

还可以添加第二个参数，用来获取键值；获取选项的索引，可以添加第三个参数。

【例5.6】添加第二、三个参数（源代码\ch05\5.6.html）。

在浏览器中运行程序，结果如图5-8所示。

图5-8　添加第二、三个参数

3．v-for指令遍历整数

也可以使用v-for指令遍历整数。

【例5.7】v-for指令遍历整数（源代码\ch05\5.7.html）。

在浏览器中运行程序，结果如图5-9所示。

图5-9　v-for指令遍历整数

4．在<template>上使用v-for

类似于v-if，也可以利用带有v-for的<template>来循环渲染一段包含多个元素的内容。

【例5.8】在<template>上使用v-for（源代码\ch05\5.8.html）。

在浏览器中运行程序，按F12键打开控制台并切换到“Elements”选项，并没有看到<template>元素，结果如图5-10所示。

图5-10　在<template>上使用v-for

5．数组更新检测

Vue将被监听的数组的变异方法进行了包裹，它们也会触发视图更新。被包裹过的方法包括push()、pop()、shift()、unshift()、splice()、sort()和reverse()。

【例5.9】数组更新检测（源代码\ch05\5.9.html）。

在浏览器中运行程序，结果如图5-11所示。按F12键打开控制台并切换到“Console”选项，在选项中输入“vm.nameList.push("1800台")”，按下Enter键，数据将添加到nameList数组中，在页面中也显示出添加的内容，如图5-12所示。

图5-11　初始化效果

图5-12　修改数据对象中的数组属性

还有一些非变异方法，例如filter()、concat()和slice()。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。

继续在浏览器控制台输入“vm.nameList=vm.nameList.concat(["2600台"，"畅销版"])”，把变更后的数组再赋值给Vue实例的nameList，按下Enter键，即可发现页面发生了变化，如图5-13所示。

图5-13　使用新数组替换原始数组

可能会认为，这将导致Vue丢弃现有DOM并重新渲染整个列表，但事实并非如此。Vue为了使得DOM元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组，这是非常高效的操作。

在Vue 3.0版本中，可以利用索引直接设置一个数组项，例如修改上面示例：

在浏览器中运行程序，结果如图5-14所示。

图5-14　通过索引向数组添加元素

从上面结果可以发现，要添加的内容已经添加到数组中了。另外还可以采用以下方法：

修改上面示例：

在浏览器中运行程序，可发现要添加的内容在页面上已经显示，结果如图5-15所示。

图5-15　使用数组原型的splice()方法

6．key属性

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一key属性。

下面我们先来看一下不使用key属性的一个示例。在【例5.10】中，定义一个nameList数组对象，使用v-for指令渲染到页面，同时添加三个输入框和一个添加的按钮，可以通过按钮向数组对象中添加内容。在示例中定义一个add方法，在方法中使用unshift()数组的开头添加元素。

【例5.10】不使用key属性（源代码\ch05\5.10.html）。

在浏览器中运行程序，选中列表中的第一个选项，如图5-16所示；然后在输入框中输入新的内容，单击“添加”按钮后，向数组开头添加一组新数据，页面中也相应显示，如图5-17所示。

图5-16　输入内容

图5-17　添加后效果

从上面结果可以发现，刚才选择的“洗衣机”变成了新添加的“电视机”。很显然这不是我们想要的结果。产生这种效果的原因就是v-for指令的“就地更新”的策略，只记住了数组勾选选项的索引0，当往数组添加内容的时候，虽然数组长度增加了，但是指令只记得刚开始选择的数组下标，于是就选择了新数组中下标为0的选项。

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一key属性。

修改上面示例，在v-for指令的后面添加key属性。代码如下：

此时再重复上面的操作，可以发现已经实现了想要的结果，如图5-18所示。

图5-18　使用key属性的结果

7．过滤与排序

在实际开发中，可能一个数组需要在很多地方使用，有些地方是过滤后的数据，而有些地方是重新排列的数组。这种情况下，可以使用计算属性或者方法来返回过滤或排序后的数组。

【例5.11】过滤与排序（源代码\ch05\5.11.html）。

在浏览器中运行程序，结果如图5-19所示。

图5-19　过滤与排序

8．v-for与v-if一同使用

v-for与v-if一同使用，当它们处于同一节点上时，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当只想渲染部分列表选项时，可以使用这种组合方式。

例如【例5.12】所示，循环输出价格大于或等于5000元的商品。

【例5.12】v-for与v-if一同使用（源代码\ch05\5.12.html）。

在浏览器中运行程序，结果如图5-20所示。

图5-20　v-for与v-if一同使用