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>
动手尝试 »
