Vuev-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 循环中非常有用。幸运的是，我们可以在使用时获得索引号v-for在 Vue 中也是如此。
获取索引号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>
亲自试一试 »
Vue练习
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!