還記得前面放多 components 的方法嗎?
// App.vue
<food-item food-name='Apples'/>
<food-item food-name='Pizza'/>

當然不可以這麼蠢對吧!
那就 v-for 一下囉
  • v-for="x in foods"   // 建立很多個 components
  • v-bind:food-name="x"   // 傳一個參數 food-name 並綁定變數 x
<div id="wrapper">
    <food-item
      v-for="x in foods"
      v-bind:food-name="x"/>
  </div>

那變數 x 呢?
就用 Vue 的 data() 屬性囉,像這樣
<script>
  export default {
    data() {
      return {
        foods: ['Apples','Pizza','Rice','Fish','Cake']
      };
    }
  }
</script>

    評語
    請登入後才可以評分
    位置
    資料夾名稱
    Vue.js 學習筆記
    上傳者
    蘇德宙
    單位
    台灣數位員工
    建立
    2025-08-06 04:39:11
    最近修訂
    2025-08-06 04:55:25