當我們有很多重復的架構，內容卻不一樣，以舊有無框架的開發，我們可能就需要手動一筆一筆的刻出來，更進步一點，會透過複製+貼上~再來更改內容(像是成績單，訂單，或者通訊錄等等)
現在，Vue 提供了列表渲染，讓這些架構一樣的更方便我們輕鬆撰寫

列表渲染 v-for

<span v-for="自定義變數名稱 in 要被渲染的數據" :key="綁定數據的唯一值">{{ 自定義變數名稱(或者是自定義變數名稱.key值[Object]) }}</span>

v-for 裡面的 :key 記得必需加上

以通訊錄來看，就像下面的範例

<div id="app">
    <ul>
        <li v-for="i in lists" :key="i.id">
            {{i.name}} - {{i.phone}} - {{i.city}}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            lists: [
                { name: 'tom', id: 1, phone: "0912345678", city: '台北' },
                { name: 'jerry', id: 2, phone: "0912345000", city: '台中' },
                { name: 'ted', id: 3, phone: "0912345123", city: '台南' },
                { name: 'kim', id: 4, phone: "0912345888", city: '高雄' },
            ]
        }
    })
</script>

是不是更方便且簡潔呢?
另外，通常要被渲染的數據會像前幾篇的 computed 所提到的，會先過濾出來，來後用來使用渲染 點我複習

v-for 的第二個參數

1 .Array Data

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

<script>
    var app = new Vue({
        el: '#app',
        data: {
            lists: [
                { name: 'tom', id: 1, phone: "0912345678", city: '台北' },
                { name: 'jerry', id: 2, phone: "0912345000", city: '台中' },
                { name: 'ted', id: 3, phone: "0912345123", city: '台南' },
                { name: 'kim', id: 4, phone: "0912345888", city: '高雄' },
            ]
        }
    })
</script>

以範例來看，當數據為陣列來說，第二個參數 index 會是當前項目的索引值，從 0 開始計算

2. Object Data

<div id="app">
    <ul id="example-2">
        <li v-for="(item, index) in items">
            {{ index }} - {{ item.phone }}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: {
                Mary: {
                    phone: "0912345678"
                },
                sandy: {
                    phone: "0912345123"
                }
            }
        }
    })
</script>

以範例來看，當數據為物件來說，第二個參數 index 會是當前項目的物件的 key

注意 !!
Object Data 還可以再接第三個參數

<li v-for="(item, index, name) in items">
    {{ index }} - {{ name }}- {{ item.phone }}
</li>

此時，命名就很重要，因為主要是依照順序，而不是照我們的命名自動匹配
<li v-for="(被渲染的每一個項目, Object-key, 索引值) in items">

v-for 單純的數字渲染

<span v-for="n in 10" :key="n">{{ n }} </span> // 1 2 3 4 5 6 7 8 9 10

此時的 n ，會是從 1 開始計算

v-for 與 v-if

注意 Vue 官方文件有提到，不推薦 v-for 與 v-if 在同一個元素上使用
因為 v-for 的優先級會比 v-if 要高，意味著每次跑 for 循環，就會跑一次 if 判斷

參考資料

Vue 官方文件 - 列表渲染