Vue v-for 指令
使用普通 JavaScript，您可能想根据数组创建 HTML 元素。您会使用一个 for 循环，并在其中创建元素、调整它们，然后将每个元素添加到页面中。而且这些元素不会对数组的更改做出反应。
使用 Vue，您从想要创建为列表的 HTML 元素开始，使用 v-for 作为属性，引用 Vue 实例中的数组，然后让 Vue 处理其余的事情。并且使用 v-for 创建的元素会在数组更改时自动更新。
列表渲染
在 Vue 中，列表渲染是通过使用 v-for 指令完成的，因此会通过 for 循环创建多个 HTML 元素。
下面是 v-for 使用的三个略有不同的示例。
循环遍历数组
循环遍历数组以显示不同的图像
循环遍历对象数组
循环遍历对象数组并显示对象属性
示例
显示不同种类食物的图像和名称，基于 Vue 实例中的数组。
<div>
<figure v-for="x in manyFoods">
<img v-bind:src="x.url">
<figcaption>{{ x.name }}</figcaption>
</figure>
</div>
自己动手试一试 »
获取索引
在 JavaScript 的 for 循环中，数组元素的索引号非常有用。幸运的是，在使用 Vue 的 v-for 时也可以获得索引号。
要使用 v-for 获取索引号，我们需要在括号中提供两个逗号分隔的单词：第一个单词是数组元素，第二个单词是该数组元素的索引。
示例
显示 Vue 实例中 'manyFoods' 数组中元素的索引号和食物名称。
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x }}" <br>
</p>
自己动手试一试 »
我们也可以显示数组元素的索引号以及数组元素本身的（如果数组元素是对象的话）信息。
示例
显示数组元素的索引号，以及 'manyFoods' 数组中对象的文本。
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x.name }}", url: "{{ x.url }}" <br>
</p>
自己动手试一试 »
