在Vue中，列表循環(huán)非常方便。列表循環(huán)可以用v-for指令來(lái)實(shí)現(xiàn)。v-for指令可以幫助我們迭代一個(gè)數(shù)組或?qū)ο螅缓蠓謩e對(duì)數(shù)組/對(duì)象的每個(gè)元素執(zhí)行一個(gè)指定的操作。這時(shí)可以使用v-for指令的語(yǔ)法，如下所示：

<ul>
<li v-for="item in items">
{{ item.text }}
</li>
</ul>

在上面的代碼里，v-for指令綁定到一個(gè)items數(shù)組，并迭代數(shù)組的每個(gè)元素。在每個(gè)迭代中，就把數(shù)組元素賦值給item變量，這樣我們就可以訪(fǎng)問(wèn)它的text屬性。通過(guò)該語(yǔ)法，可以在模板中輕易的創(chuàng)建一個(gè)列表。

但這樣的列表循環(huán)并不是最終的形態(tài)。在實(shí)際開(kāi)發(fā)中，我們會(huì)遇到各種各樣的數(shù)據(jù)結(jié)構(gòu)來(lái)需要循環(huán)。這種情況下，我們需要擴(kuò)展v-for指令來(lái)處理對(duì)象和數(shù)組的不同哈希映射。它提供了以下的語(yǔ)法：

<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
<li v-for="(value, key, index) in items">
{{ index }}. {{ key }} : {{ value }}
</li>

在上面的語(yǔ)法里，v-for指令使用一個(gè)括號(hào)為對(duì)象采取一個(gè)類(lèi)似于params的語(yǔ)法來(lái)進(jìn)行迭代。迭代參數(shù)可以有多個(gè)，分別對(duì)應(yīng)當(dāng)前迭代元素的值、鍵名、和列表的索引值。

在Vue 2.x版本里，還引入了用于迭代數(shù)字區(qū)間的特殊語(yǔ)法。例如，我們可以使用一個(gè)包含數(shù)字1到5的區(qū)間來(lái)迭代：

<div>
<span v-for="n in 5">{{ n }}</span>
</div>

這種類(lèi)型的v-for語(yǔ)法可以是一個(gè)數(shù)字，它表示的是序列數(shù)字的起始值。我們還可以使用另一個(gè)數(shù)字來(lái)指定序列數(shù)字的結(jié)束值。

除此之外，v-for指令還可以支持迭代作為組件的子組件。這意味著我們可以把列表組件使用v-for指令來(lái)循環(huán)的方式，引入到其他組件里面。在這種情況下，v-for指令可以用另一種語(yǔ)法，如下所示：

<my-component v-for="(item, index) in items"
:key="item.id"
:item="item">
</my-component>

在這種語(yǔ)法里，v-for指令在my-component中循環(huán)，同時(shí)把每個(gè)item對(duì)象解析為item變量，并把index變量加入到v-for指令中。

總之，Vue的v-for指令是一個(gè)非常強(qiáng)大的迭代工具。它不僅能夠迭代數(shù)組和對(duì)象，還可以支持迭代數(shù)字區(qū)間、作為組件的子組件等等。這使開(kāi)發(fā)人員認(rèn)真分析復(fù)雜的數(shù)據(jù)結(jié)構(gòu)變得輕松愉快。