Day6 - Vue.js 的基礎魔法：v-on

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

Topic

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

• 請利用 v-on:click 替「加入購物車」按鈕加上點擊事件，並能正確的觸發運行 alert。

<template>
  <div id="app" class="container">
    <div class="row">
      <template v-for="(fruit, index) in fruitData" :key="index">
        <div class="col-md-6 mb-3">
          <div class="card" style="width: 100%;">
            <div class="card-body">
              <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>
      </template>
    </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 mt-3">
      <div class="col-md-6 mb-3" v-for="fruit in fruitData" :key="fruit.title">
        <div class="card" style="width: 100%;">
          <div class="card-body">
            <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" @click="addCart(fruit)">加入購物車</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from "vue";
  const addCart = (fruit) => {
    alert(`已將 ${fruit.title} 加入購物車`)
  }
  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>

思考與反饋

• 學習使用 v-on 事件監聽，以及事件修飾符和按鈕修飾符

事件修飾符

• 一個指令可以加入多個修飾符，修飾符的順序會影響執行
• .prevent | 清除預設事件

  <!-- 清除表單送出後預設的刷新 -->
  <form @submit.prevent="onSubmit"></form>

• .self | 只會觸發元素自己的事件

按鈕修飾符

<!-- 只在按下鍵盤 Enter 的時候才觸發 -->
<input @keydown.enter="submit" />

---

CODE

連結到 Codepen