Vue 程式札記 : 指令 v-for
在Vue中，v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法，並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
什麼是 v-for 指令?
v-for是 Vue 中用於陣列渲染的一個指令。它可以用來渲染一組數據，每個數據項都可以使用模板進行展示，v-for指令的基本語法如下：
<li v-for="item in items">{{ item }}</li>
在這個範例中，items是一個陣列，item是陣列中的每個元素。v-for指令會遍歷items陣列，並為每個item渲染一個<li>元素。
v-for 遍歷陣列渲染
讓我們通過一個實際的範例來看看如何使用v-for來渲染一個簡單的陣列：
<template>
<div>
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const fruits = ref(['蘋果', '香蕉', '橙子']);
return { fruits };
}
}
</script>
在這個範例中，我們有一個名為fruits的陣列，包含三種水果，我們使用v-for指令來遍歷fruits陣列，並為每種水果渲染一個<li>元素。
在 v-for 中使用 index
有時候，我們可能需要訪問當前項目的索引。v-for指令允許我們將索引作為第二個參數來使用：
<template>
<div>
<ul>
<li v-for="(fruit, index) in fruits">{{ index }} - {{ fruit }}</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const fruits = ref(['蘋果', '香蕉', '橙子']);
return { fruits };
}
}
</script>
在這個範例中，我們除了顯示水果的名稱外，還顯示了水果在陣列中的索引。
v-for 遍歷物件渲染
v-for指令不僅可以用於陣列，還可以用於物件的屬性。例如：
<template>
<div>
<ul>
<li v-for="(obj, index) in objects" :key="index">
{{ index + 1 }}. 姓名: {{ obj.name }}，年齡: {{ obj.age }}，職業: {{ obj.job }}
</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const objects = ref([
{
name: '張三',
age: 30,
job: '工程師'
},
{
name: '李四',
age: 25,
job: '設計師'
}
]);
return { objects };
}
}
</script>
在這個範例中，我們使用 v-for 指令來遍歷 objects ，並為每個物件渲染一個列表項目 (<li>)。每個列表項目都顯示了物件的 name、age 和 job 屬性。我們還使用了 :key ，:key是一個重要的屬性，它用於跟踪每個節點的身份，從而提高渲染性能。這裡我們使用了索引 index 作為鍵。
v-for 注意事項
1.避免使用索引作為 key：如果列表項目的順序可能會改變，不應使用索引作為 key，因為這可能導致渲染錯誤，如果你的數據項目有一個唯一的屬性(例如 id)，請使用該值作為 key，如果沒有唯一值，可以通過組合索引和屬性值來創建一個唯一的 key。
<li v-for="(item, index) in items" :key="`${item.name}-${index}`">{{ item.name }}</li>
2.v-if 與 v-for：不應將 v-if 和 v-for 用於同一元素，因為 v-if 會優先於 v-for 被評估，但是，你可以將 v-for 放在 <template> 標籤上，然後在子元素上使用 v-if。
<template v-for="item in items">
<li v-if="item.visible" :key="item.id">{{ item.text }}</li>
</template>
😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊
