Day4 - Vue.js 的基礎魔法：v-for

2025 Vue 直播班每日任務，藉由一天學一點積沙成塔

Topic

操作提供的模版，執行以下要求（只能修改 HTML 的部分）：

• 請使用 v-for 渲染資料

<template>
  <div id="app" class="container">
    <div class="row">
      <div class="col-md-6 mb-3">
        <div class="card" style="width: 100%;">
          <div class="card-body">
            <h5 class="card-title">水果名稱：{{}}</h5>
            <p class="card-text my-2">價錢：{{}}</p>
            <p class="card-text mb-3">數量：{{}}</p>
            <a href="#" class="btn btn-primary">加入購物車</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 請不要修改下面內容 -->
<script setup>
  import { ref } from "vue";
  const fruitData = ref([
    {
      title: 'apple',
      price: 25,
      count: 50,
      imgUrl: 'https://i.imgur.com/w4sYWlS.jpeg'
    },
    {
      title: 'orange',
      price: 15,
      count: 20,
      imgUrl: 'https://i.imgur.com/PSmzmXi.jpeg'
    },
    {
      title: 'strawberry',
      price: 45,
      count: 10,
      imgUrl: 'https://i.imgur.com/FIMmh6h.png',
    },
    {
      title: 'kiwi',
      price: 55,
      count: 20,
      imgUrl: 'https://i.imgur.com/TIA6v4m.jpeg'
    }
  ]);
</script>

---

Result

<template>
  <div id="app" class="container">
    <div class="row">
      <div class="col-md-6 mb-3 mt-3" v-for="fruit in fruitData" :key="fruit.title">
        <div class="card" style="width: 100%;">
          <div class="card-body" v-for="fruit in fruitData" :key="fruit.title"> {/* 注意 v-for 不可以放錯地方 */}
            <img :src="fruit.imgUrl"/>
            <h5 class="card-title">水果名稱：{{fruit.title}}</h5>
            <p class="card-text my-2">價錢：{{fruit.price}}</p>
            <p class="card-text mb-3">數量：{{fruit.count}}</p>
            <a href="#" class="btn btn-primary">加入購物車</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

思考與反饋

• 學習使用 v-for 跑迴圈

---

CODE

連結到 Codepen