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>
自己動手試一試 »
