寫程式的我們都知道，如果想要把陣列或物件裡所有東西print出來，就需要用到迴圈來寫，在Vue中，也有可以放在HTML元素中的循環指令，把陣列或物件的所有元素顯示出來，官方稱這個叫做列表渲染(List Rendering)，下面我們就來看看Vue的指令要如何做到跟迴圈一樣的效果。

列表渲染指令

v-for

• 用途：重複迭代顯示陣列或物件中的元素，類似loop的概念。
• 表達式：array、object、number、string
• 用法：alias in expression (別名 in 表達式)

1. 陣列循環array 寫法：

以下範例說明：data那邊宣告一個memberArray陣列[]，member是自定義的別名，會暫存從memberArray陣列取出的元素，進而可以使用該屬性，member.id與member.name，index代表索引值。

<div id="app">
    <ul>
        <li v-for="(member, index) in memberArray">
            index: {{ index }} ,
            id: {{ member.id }} ,
            name: {{ member.name }}
        </li>
    </ul>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        memberArray: [
            { id: '11', name:'Eva' },
            { id: '12', name:'Ray' },
            { id: '13', name:'Ben' }
        ]
    }
});

• run on JSFiddle

2. 物件循環object 寫法：

<div id="app">
    <ul>
        <li v-for="member in memberObject">
            {{ member }}
        </li>
    </ul>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        memberObject: {
            name: 'Eva',
            gender: 'female',
            age: '22'
        }
    }
});

從上面範例可以看出，物件是以key: value儲存資料，Vue提供第二個參數取得key。

<ul>
    <li v-for="(member, key) in memberObject">
        {{ key }} : {{ member }}
    </li>
</ul>

可以再加入第三個參數index，作為索引值。

<ul>
    <li v-for="(member, key, index) in memberObject">
        {{ index }} . {{ key }} : {{ member }}
    </li>
</ul>

• run on JSFiddle

3. 整數循環number 寫法：

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

var vm = new Vue({
    el: '#app'
});

• run on JSFiddle

4. 字串循環string 寫法：

<div id="app">
    <span v-for="string in 'Vue'">{{ string }}-</span>
</div>

var vm = new Vue({
    el: '#app'
});

• run on JSFiddle

key

v-for已經為列表渲染提供很高的效能了，但是假設我們要更新陣列中的元素呢？

Vue盡量將列表資料渲染出來，但是在沒設定key值的情況下，當我們改變陣列中的元素，會造成部分元素更新，而不會重新渲染元素。

另外前面我們提到過Virtual DOM會使用DOM diff演算法來比較這一次與上一次Virtual DOM的差異，所以當列表中有資料異動時，Virtual DOM是會這樣操作的：

DOM diff比較出差異後，將C更新成F、D更新成C、E更新成D、最後再放入E，如此一來，效率就沒有比較好。

也因此為了辨識每一項元素，Vue提供key可以為每一項元素設定key值，看看下圖比較一下沒有設定key值與有設定key值的差異：

所以設定key值的目的就是在Virtual DOM更新的時候，提供較高的效能，並使用v-bind綁定key屬性:key，讓陣列或物件裡的元素保有唯一性，當元素更新時，可以確保重新渲染元素。

<div v-for="item in items" :key="item.id">
    <!-- content -->
</div>

陣列元素操作

Vue提供一組可以操作陣列的method，用來變更陣列元素，觀察其變更。

其實Vue的列表渲染可以做很多事情，像是使用computed來過濾或排序陣列元素，或則應用在做一個todo list、分頁功能等等，後面在實作應用上會舉例給大家看。

參考資料

• Vue.js - v-for
• Vue.js - List Rendering
• Vue.js: 列表渲染 v-for
• Vue2.0 v-for 中 :key 到底有什么用？