摘要

v-for 指令用於根據一份來源資料（通常是陣列），重複地渲染一個 HTML 元素或區塊。

定義與說明

v-for 的語法是 item in items，其中 items 是來源陣列，item 是代表當前循環項目的臨時別名。使用 v-for 時，必須同時提供一個唯一的 :key 屬性，用以幫助 Vue 追蹤每個節點，從而高效地更新畫面。

實作範例

Vue SFC

<script setup>
import { ref } from 'vue';
const fruits = ref([
  { id: 1, name: '蘋果' },
  { id: 2, name: '香蕉' },
]);
</script>

<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit.id">
      {{ fruit.name }}
    </li>
  </ul>
</template>

結論

v-for 是將陣列資料轉換為重複 UI 區塊的標準做法。item in items 語法和提供唯一的 :key 是其使用的兩大核心要素。

v-for 列表渲染陣列