Vue v-for 指令

使用普通的 JavaScript，您可能希望基于数组创建 HTML 元素。您使用 for 循环，在循环中您需要创建元素，调整它们，然后将每个元素添加到页面中。这些元素不会对数组中的变化做出反应。

使用 Vue，您可以从要创建到列表中的HTML元素开始，使用 v-for 作为属性，引用 Vue 实例中的数组，并让 Vue 处理其余部分。使用 v-for 创建的元素将在数组更改时自动更新。

列表渲染

Vue 中的列表呈现是通过使用 v-for 指令完成的，因此使用 for 循环创建了几个 HTML 元素。

下面是使用 v-for 的三个略有不同的示例。

实例

显示基于数组项的列表。

<ol>
  <li v-for="x in manyFoods">{{ x }}</li>
</ol>

循环数组

循环遍历数组以显示不同的图片:

实例

基于 Vue 实例中的数组显示食物的图片。

<div>
  <img v-for="x in manyFoods" v-bind:src="x">
</div>

循环数组对象

循环数组中的对象，显示其属性:

实例

根据 Vue 实例中的数组显示不同类型食物的图片和名称。

<div>
  <figure v-for="x in manyFoods">
    <img v-bind:src="x.url">
    <figcaption>{{ x.name }}</figcaption>
  </figure>
</div>

获取索引

数组元素的索引号在 JavaScript 中对循环非常有用。幸运的是，当在 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>