「Vue.js 學習筆記 Day6」- v-for 列表渲染（基礎篇）
Published in
3 min readJun 21, 2019
程式海無涯，聽說永遠學不完，那我只好一點一點把它們寫下來囉！
由於 v-for的內容較多，因此，我們會分成兩篇來介紹，首先將介紹在v-for 渲染畫面的基礎方式。
而 v-for 如同 forEach 的功能，主要用於渲染元素或是模板內容。
下面讓我們透過四個案例實際來瞭解 v-for的使用方法吧～～
案例一：陣列渲染
使用v-for迭代渲染出陣列中的元素。如下所示，list 是一個陣列，item 代表用於迭代的元素，使用item.name或item.age可帶出資料的屬性。
其中第二個參數 index 為資料的索引值 (optional)，由於資料是陣列的形式，因此，依序從 0 開始跑到 2，共 3 筆資料內容。
渲染結果如下：
案例二：物件渲染
使用v-for迭代物件中的元素。第二個參數 key 是鍵值，第三個參數 index 是索引值，皆為 optional。
第二個參數 key 會呈現 ObjectData [0]、ObjectData [1]、ObjectData [2]，相對應的資訊為 ming、auntie、jay。
渲染結果如下：
此外，可透過 :key="item.age" 取得該筆資料的唯一值，避免資料渲染時有錯誤產生。
案例三：純數字的迴圈
渲染結果如下：
案例四：v-for 搭配 template 顯示資料
渲染結果如下：
結語
此篇文章希望幫助大家初步理解 v-for的基礎內容，下一篇文章將著重在 v-for 與 v-if的搭配，以及相關的實作上，敬請期待。
謝謝你的閱讀！如果有任何想法，也歡迎留言與我分享～如果願意給我一些小小鼓勵，請給我 1–20 個拍手；
如果覺得文章對你有點幫助，請給我 21-30 個拍手；如果非常喜歡我的技術筆記，請長按拍手按鈕（50個拍好拍滿）讓我知道哦 👏🏻最後，若希望持續追蹤我的最新文章，別忘了追蹤 皮爾斯的自學旅程 唷，乾溫 :D
