一般我們使用原生 JS 要來渲染一個 Array 或是 Object 的時候我們會去使用 for loop，如果是 Array 的話還能夠使用 Array Methods，例如：forEach 或 map 等等之類的，如果是 Object 就使用 for in 來跑迴圈。
而在 Vue 我們只要使用 v-for 就能簡單地做到清單的渲染，下面就來介紹一下如何使用：
v-for 的語法是：
v-for="item in items"
//items 就是要渲染的 Array or Object
//item 就是 Array or Object 裡的 children
接下來就來實際練習一下，下面我們有一個成員的清單，我們使用 v-for 在我們要執行渲染的元素上。
<body>
<div id="app">
<ul>
<li v-for="member in members">{{member}}</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
members: ['Andy', 'Arel', 'Otree', 'X', 'Curts', 'Kai', 'Hugh']
}
})
</script>
我們針對 li 做 v-for 它會依據 Array 的長度渲染出相對數量的 li，並且顯示 Array 的內容，結果如下：
那我們如果要取得每個元素當前的 index 呢？！
很簡單的～ 上面 v-for 的語法我們只要再加上 index 就好了
v-for="(item, index) in items"
這樣就能取得 index 了，我們一樣拿上面的例子來練習～
<body>
<div id="app">
<ul>
<li v-for="(member, index) in members">{{member}} {{index}}</li>
</ul>
</div>
</body>
我們就能成功地取得 index 囉～
剛剛上面提到了 v-for 不僅僅可以渲染 Array 也能夠渲染 Object，使用的方式其實是一樣的，下面就來看一下吧～
<body>
<div id="app">
<ul>
<li v-for="(member, key) in members">{{member}} / {{key}}</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
members: { //key 隨便命名不要太計較啊哈哈
name1: 'Andy',
name2: 'Arel',
name3: 'Otree',
name4: 'X',
name5: 'Curts',
name6: 'Kai',
name7: 'Hugh'
}
}
})
</script>
這樣我們一樣能夠渲染 Object value 還有它的 key 囉～
另外 Vue 官方有建議在使用 v-for 進行渲染時，在要渲染的元素上加上一個 key 的屬性。
因為 Vue 它會根據 key 值去判斷某個值是否修改，如果修改則重新渲染這一項，否則複用之前的元素。
使用方式如下：
<li v-for="item in items" :key="something">{{item}}</li>
key 值必須綁定一個唯一值，也就是不會重複的值。
例如，我們有一個清單是像下面這樣：
data: {
members: [
{
id: 1,
name: 'Andy',
},
{
id: 2,
name: 'Arel',
},
{
id: 3,
name: 'Hugh',
},
]
}
在使用 v-for 渲染時就可以這樣寫：
<li v-for="member in members" :key="member.id">{{member.name}}</li>
這樣後面我們在對這清單做操作時，Vue 就會去看這些元素的 key 來判斷只針對有新增或修改的重新渲染，其他的就不會再重新渲染了～
iThome鐵人賽
看影片追技術