Vue.js 3.x+Element Plus从入门到精通（视频教学版）最新章节_张工厂著

2.4　使用v-for指令进行循环渲染

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

1．v-for指令遍历数组

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

     <div v-for="item in items">
        {{item}}
     </div>

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

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

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

图2-13　v-for指令遍历数组

v-for指令的语法结构也可以使用of替代in作为分隔符，例如：

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

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

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

图2-14　v-for指令的第二个参数

2．v-for指令遍历对象

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

     value in object

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

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

在Chrome浏览器中运行程序，结果如图2-15所示。

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

【例2.14】　添加第二和第三个参数（源代码\ch02\2.14.html）。

在Chrome浏览器中运行程序，结果如图2-16所示。

图2-15　v-for指令遍历对象

图2-16　添加第二和第三个参数

3．v-for指令遍历整数

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

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

在Chrome浏览器中运行程序，结果如图2-17所示。

图2-17　v-for指令遍历整数

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

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

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

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

图2-18　在<template>上使用v-for

template元素一般常和v-for和v-if一起结合使用，这样会使得整个HTML结构没有那么多多余的元素，整个结构会更加清晰。

5．数组更新检测

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

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

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

图2-19　初始化效果

图2-20　修改数据对象中的数组属性

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

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

图2-21　使用新数组替换原始数组

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

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

在Chrome浏览器中运行程序，结果如图2-22所示。

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

     //使用数组原型的splice()方法
     app.nameList.splice(0,0,"畅销版")

修改上面的示例：

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

图2-22　通过索引向数组添加元素

图2-23　使用数组原型的splice（）方法

6．key属性

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

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

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

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

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

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

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