1.8　v-for指令

作用：循环遍历普通数组、对象数组、对象、数字等。

1.8.1　遍历普通数组

v-for指令是Vue非常重要的指令之一，也是每个项目都要用到的指令，其作用是用来遍历数据。例如在data中定义数组，将数组中的每一项渲染到h1标签，代码如下。

M层代码如下。

视图层代码如下。

运行结果如图1-14所示。

     <h1 v-for="(item,i) in arrList" :key="i">{{item}}</h1>

代码解析如下。

（1）v-for指令中，item表示的是数组里面的每一项，名字是可以随意命名的。

（2）i表示数组的索引，从0开始。

（3）使用v-for指令必须绑定key属性，key的属性值可以是不重复的数字或者字符串，也可以直接把数组索引作为key的属性值。

（4）数据使用插值表达式渲染。

1.8.2　遍历对象数组

上述代码只能遍历普通数组，v-for指令也可以遍历对象数组，代码如下。

M层代码如下。

视图层代码如下。

运行结果如图1-15所示。

代码解析如下。

（1）绑定key属性的值是arrList数组对象中的id属性。

（2）item表示数组中的每一项，arrList数组中的每一项都是一个对象，需要对象中的哪个属性就用“item.属性”，例如{{item.name}}。

1.8.3　遍历对象

本节讲解使用v-for遍历对象，在M层定义普通对象，代码如下。

M层代码如下。

视图层代码如下。

运行结果如图1-16所示。

代码解析：v-for指令循环遍历对象是以键-值对形式，代码<li v-for="(val,key,i) in obj" :key="i">中第一个参数表示值，第二个参数表示键。

1.8.4　遍历数字

v-for指令还可以遍历数字，进行数字叠加，例如输出1～10，代码如下。

视图层代码如下。

运行结果如图1-17所示。