vue2教程系列第十节-v-for指令

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">{{ value }}</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>

今天这节课就到这里了，我们休息一下，明天继续加油噢：）