在宇宙裡，星星可不會只有一顆。
昨天我們學會了用 v-if / v-show 控制「要不要顯示」，但如果我們有一整片星座需要顯示在畫面上，難道要一個一個手刻嗎？
這時候，Vue 提供的 v-for 就派上用場了。

1) 什麼是 v-for？

v-for 是 Vue 的 迴圈指令，用來根據一個清單（陣列或物件）重複渲染元素。
你只要準備一份資料清單，Vue 就會幫你「遍歷」它，並把每一筆資料渲染成對應的元素。

簡單來說：
「有幾顆星星，v-for 就幫你畫出幾個 <li>。」

2) 何時會用到 v-for？

• 顯示清單：例如任務列表、產品清單、留言板、星球清單。

• 動態生成元件：一次產生多個相同的子元件（例如多個「星球卡片」）。

• 資料綁定：迴圈裡的元素可以和資料綁在一起，互動時能影響到正確的那一筆資料。

3) 宇宙範例：顯示星球清單

我們準備一份「銀河探險任務」裡的星球清單，透過 v-for 一次渲染出來：

<template>
  <div>
    <h2>🌌 銀河探險清單</h2>
    <ul>
      <!-- v-for 語法：item in array -->
      <li v-for="(planet, index) in planets" :key="index">
        🪐 第 {{ index + 1 }} 顆星球：{{ planet }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 星球清單
const planets = ref([
  '水星', '金星', '地球', '火星', '木星', '土星'
])
</script>

結果：畫面會依序列出六顆星球，前面還帶著編號。
如果你在 planets 裡多加一個「天王星」，畫面就會自動多一行，不需要手動加 <li>！

小提醒：:key 屬性

在使用 v-for 時，建議加上 :key 屬性（通常是唯一 ID 或索引值）。
key 可以幫 Vue 快速追蹤每個元素，提升渲染效率，也避免 bug。

3) 宇宙範例：探索適合居住的星球

在實際開發裡，v-for 幾乎常常會搭配 v-if / v-show，讓清單裡的元素能依條件顯示或隱藏，我們最後來個綜合範例練習吧～

<template>
  <div>
    <h2>🛰️ 銀河星球探索</h2>
    <ul>
      <!-- v-for + v-if -->
      <li 
        v-for="(planet, index) in planets" 
        :key="planet.name"
        v-if="planet.habitable"
      >
        🌍 發現適合居住的星球：{{ planet.name }}
      </li>
    </ul>

    <h3>🔭 全部星球清單（用 v-show 控制顯示）</h3>
    <button @click="showAll = !showAll">
      {{ showAll ? '隱藏清單' : '顯示清單' }}
    </button>

    <ul>
      <li 
        v-for="(planet, index) in planets" 
        :key="planet.name" 
        v-show="showAll"
      >
        🪐 {{ planet.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showAll = ref(false)

// 星球清單，只有部分適合居住
const planets = ref([
  { name: '水星', habitable: false },
  { name: '金星', habitable: false },
  { name: '地球', habitable: true },
  { name: '火星', habitable: true },
  { name: '木星', habitable: false }
])
</script>

結果：
v-if 在清單中 → 可以篩掉不符合條件的項目。
v-show 在清單中 → 所有項目都先渲染好，再根據開關來控制顯示。

4) 總結

v-for 幫我們把「一個個重複的元素」自動生成出來。適合用在清單、動態內容或需要顯示大量相似元素的場景。就像在銀河中旅行，當你準備了一份星球清單，Vue 會幫你把它們一顆顆排列在夜空裡。

明天我們將一起學習 v-on，也就是 Vue 的事件處理方式，來讓畫面能夠對使用者動作做出反應，像是讓使用者能點擊星球、開啟星門、甚至觸發一場流星雨。

參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3