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>

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡