v-for指令
作用：循环遍历普通数组、对象数组、对象、数字等。
遍历普通数组
v-for 指令是 Vue 非常重要的指令之一，也是每个项目都要用到的指令，其作用是用来遍历数据。例如在 data 中定义数组，将数组中的每一项渲染到 h1 标签，代码如下。
M 层代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
arrList: ['php', 'asp', 'java']
}
})
</script>视图层代码如下。
<!-- 视图层代码 -->
<div id="app" v-cloak>
<h1 v-for="(item, i) in arrList" :key="i">
索引：{{ i }}---值：{{ item }}
</h1>
</div>运行结果如图 1-14 所示。
Figure 1. 图1-14 v-for遍历普通数组
<h1 v-for="(item,i) in arrList" :key="i">{{item}}</h1>代码解析如下：
-
v-for 指令中，item 表示的是数组里面的每一项，名字是可以随意命名的。
-
i 表示数组的索引，从 0 开始。
-
使用 v-for 指令必须绑定 key 属性，key 的属性值可以是不重复的数字或者字符串，也可以直接把数组索引作为 key 的属性值。
-
数据使用插值表达式渲染。
遍历对象数组
上述代码只能遍历普通数组，v-for 指令也可以遍历对象数组，代码如下。
M 层代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
arrList: [
{
id: 1,
name: 'php'
},
{
id: 2,
name: 'asp'
},
{
id: 3,
name: 'java'
}
]
}
})
</script>视图层代码如下。
<div id="app" v-cloak>
<ul>
<li v-for="(item, i) in arrList" :key="item.id">
<h1>{{ item.id }} --- {{ item.name }}</h1>
</li>
</ul>
</div>运行结果如图 1-15 所示。
代码解析如下。
-
绑定 key 属性的值是 arrList 数组对象中的 id 属性。
-
item 表示数组中的每一项，arrList 数组中的每一项都是一个对象，需要对象中的哪个属性就用 “item.属性”，例如
{{item.name}}。
Figure 2. 图1-15 v-for遍历对象数组
遍历对象
本节讲解使用 v-for 遍历对象，在 M 层定义普通对象，代码如下。
M 层代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
obj: {
id: 1,
name: 'vue.js',
desc: '理念：数据驱动视图和组件化'
}
}
});
</script>视图层代码如下。
<div id="app" v-cloak>
<ul>
<li v-for="(val, key, i) in obj" :key="i">
值：{{ val }} --- 键：{{ key }} --- 索引：{{ i }}
</li>
</ul>
</div>运行结果如图 1-16 所示。
代码解析：v-for 指令循环遍历对象是以键-值对形式，代码 <li v-for="(val,key,i) in obj" :key="i"> 中第一个参数表示值，第二个参数表示键。
Figure 3. 图1-16 v-for遍历对象
