小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
在真实开发中，我们往往会从服务器拿到一组数据，然后需要对其进行渲染展示。
这个时候我们就可以使用 v-for 指令来完成一个列表的渲染。
v-for 类似于 JavaScript 中的 for 循环，可以用于遍历一组数据，不过它是用在模板中。
1. v-for 基本使用
v-for 的基本格式是：item in 数组：
- 数组通常来自
data或者props选项； item是我们给每项元素起的一个别名（可以自定义）。- 还可以把
in换成of，这样就更接近JavaScript迭代器的语法了。
示例：
<template id="my-app">
<h2>电影列表</h2>
<ul>
<!-- 因为想要展示一系列的 li，所以把 v-for 写在一个 li 元素上 -->
<li v-for="item in movies">{{ item }}</li>
</ul>
</template>
data() {
return {
movies: [
'中国医生',
'流浪地球',
'战狼',
'攀登者'
]
}
}
我们在遍历数组的时候经常需要拿到数组的索引：
- 如果需要获取数组的索引，可以使用如下格式：
(item, index) in 数组（这对小括号可以省略，但建议加上以提高可读性）； - 注意括号中的顺序：数组元素
item是在前面的，元素的索引index是在后面的。
示例：
<template id="my-app">
<h2>电影列表</h2>
<ul>
<li v-for="(item, index) in movies">{{ index }} - {{ item }}</li>
</ul>
</template>
渲染的效果：
2. v-for 支持的类型
v-for 除了可以遍历数组的元素和索引，还可以遍历对象的属性值、属性名和属性索引：
遍历对象的属性值示例：
<template id="my-app">
<h2>个人信息</h2>
<ul>
<li v-for="value in info">{{ value }}</li>
</ul>
</template>
data() {
return {
info: {
name: 'coderzhj',
age: 20,
height: 1.88
}
}
}
遍历对象的属性值和属性名示例：
<template id="my-app">
<h2>个人信息</h2>
<ul>
<li v-for="(value, key) in info">{{ key }}: {{ value }}</li>
</ul>
</template>
遍历对象的属性值、属性名和属性索引示例：
<template id="my-app">
<h2>个人信息</h2>
<ul>
<li v-for="(value, key, index) in info">{{ index }}. {{ key }}: {{ value }}</li>
</ul>
</template>
渲染的效果：
需要注意的是，在遍历对象时，v-for 会按 Object.keys() 的结果（对象自有可枚举属性名组成的数组）遍历，但是不能保证它在不同 JavaScript 引擎下的结果都一致。
v-for 还可以遍历非负整数，相当于把所在元素重复对应的次数：
<template id="my-app">
<h2>数字列表</h2>
<ul>
<li v-for="(num, index) in 10">{{ index }} - {{ num }}</li>
</ul>
</template>
上面的示例中，数字会从 1 开始进行遍历，<li> 会被渲染 10 次。
