我們可以利用v-for這個指令來呈現列表，一般來說v-for指令須配合特殊語法 : item in items，這邊的items是一組名為items陣列內的數據們，item是指 items 內的一個值。
案例示範:
1.對array使用 v-for
<div id="id">
<ul>
<li v-for="item in items">
{{ item.label }}
</li>
</ul>
</div>
<script>
Vue.createApp({
data() {
return {
items: [
{
label: '10 party hats',
id: 1
}, //items[0]
{
label: '2 board games',
id: 2
}, //items[1]
{
label: '20 cups',
id: 3
}, //items[2]
]
}
}
}).mount('#id')
</script>output:
- 10 party hats
- 2 board games
- 20 cups
2.用 v-for 寫 1-10
<div>
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>
</div>output:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3.對物件使用v-for
<div id="id">
<ul>
<li v-for="(value, key,index) in items">
{{ index }}-{{ key }}-{{ value }}
</li>
</ul>
</div>
<script>
Vue.createApp({
data(){
return{
items: {
label: "10 party hats",
auther:16,
startfrom:"June",
}
}
}
}).mount('#id')
</script>output :
- 0-label-10 party hats
- 1-auther-16
- 2-startfrom-June
v-for & v-if
當在同一元素上使用這兩個指令，v-if 比 v-for具有更高的優先級。
錯誤原因 : v-if 比 v-for 具有更高的優先級，所以會導致 todo 未定義，因此會得到錯誤訊息
<div>
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>
</div>解法:移動v-for到包裝<template>標籤來解決
<div>
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>
</div>Key 值
加入 key 值可以讓 v-for 擁有唯一值，在某些具有大量數據的情況下，加入 key 值可以狀態保持高效能，如果數據項的順序發生了變化，Vue 將針對個別被修改的元素修改並確保它呈現在該特定 key 值內容。
* 建議盡可能使用 v-for 時提供 key 屬性，除非數據量非常少或簡單。
Mutation
Vue 包裝了被觀察陣列的 mutation methods， 因此 mutation methods 可以觸發 view 的更新。包裝的方法有以下幾種 :
push()pop()shift()unshift()splice()sort()reverse()
-Mutation methods V.S Non-mutating methods
若用 Mutation methods 是將原始陣列內的數組進行變異，但當然也有 non-mutating methods，比如 : filter(), concat(), slice()，所以與 mutation methods 相反 non-mutating methods 的定義是不更改原始陣列但回傳一組被替換過的新陣列。
-過濾/排序
<div id="id">
<li v-for="n in filter()">{{ n }}</li>
</div>
<script>
Vue.createApp({
data(){
return{
numbers:[1,2,3,4,5,6,7,8,9,10]
}
},
methods: {
filter(){
return this.numbers.filter((number) => number < 6)
}
}
}).mount('#id')
</script>output :
- 1
- 2
- 3
- 4
- 5
除此之外必須小心reverse(), sort()，這兩種方法將會去變動原本的陣列，所以建議在使用前先複製一個關於原本陣列的副本。
複製副本的方法 :
return [...numbers].reverse()參考文件：
