v-for指令，即列表渲染
在数据项里，我们首先定义一个列表数组：
list: ["apple", "pear", "banana"]
在页面上我想把这几个水果名展示在li里面，如何做呢？我们可以这样做，利用v-for指令：
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
解释一下：我们要去循环list，循环的每一项内容都会放到item的变量里去。循环展示li的时候，就会把item里的内容展示输出出来。另外你也可以用 of 替代 in 作为分隔符
<ul>
<li v-for="item of list">{{ item }}</li>
</ul>
我们还可以将每一项的索引输出来
<ul>
<li v-for="(item, index) in list">{{ index }}-{{ item }}</li>
</ul>
输出的结果是：
上面是循环的数组，那么在对象里如何做呢？
我们首先在数据项里定义一组对象：
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
在页面里呢，我们可以用 v-for ，通过对象的属性来迭代
<ul>
<li v-for="value in object">{{ item }}</li>
</ul>
结果就是：
如果我们想把每一项的key值输出来，又该怎么办呢？我们可以这样做
<ul>
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>
key 是键名，输出的结果是：
v-for的作用就是，当你有一个数据列表需要做循环展示的时候，它会帮助你把这个数据循环展示出来。当我们在用v-for 的时候，我们还需要加上一个key属性，这个key属性可以提升每次渲染的性能。key值必须是具有惟一识别性的，不能重复的。如果我的数据项都不是重复的，我们可以把key值设置成item，但如果item有重复项，我们可以将key值设置为index，可以这样写：
<ul>
<li v-for="(item, index) in list" :key="index">{{ index }}: {{ item }}</li>
</ul>
微信公众号：duzhan99
