Day3 - Vue.js 的基礎魔法：v-model 表單題目

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

Topic

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

請將 class 名稱為 .Q1、.Q2 的 div 標籤，利用 v-model 將資料進行雙向綁定，選取時能夠正確呈現資料。

<template>
  <div id="app">
    <div class="container">
      <div class="Q1 mb-5">
        <form>
          <div v-for="fruit in fruitData" :key="fruit.title" class="form-check">
            <input 
              type="checkbox" 
              :id="fruit.title" 
              :value="fruit.title" 
              class="form-check-input"
            />
            <label :for="fruit.title" class="form-check-label">{{ fruit.title }}</label>
          </div>
        </form>
        <div class="mt-3">
           透過 checkbox 選擇的水果：<span class="fw-bold">{{ checkedFruits.join(', ') }}</span>
        </div>
      </div> 

      <div class="Q2">
        <select class="form-select mb-2">
          <option 
            v-for="fruit in fruitData" 
            :key="fruit.title" 
            :value="fruit.title"
          >
            {{ fruit.title }}
          </option>
        </select>
        <div class="mt-3">
          透過 select 選擇的水果：<span class="fw-bold">{{ selected }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 請不要修改下面內容 -->
<script setup>
import { ref } from "vue";
const checkedFruits = ref([]);
const selected = ref('');
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

<input 
  type="checkbox" 
  :id="fruit.title" 
  :value="fruit.title" 
  class="form-check-input"
  v-model="checkedFruits"
/>

<select class="form-select mb-2" v-model="selected">
  <option 
    v-for="fruit in fruitData" 
    :key="fruit.title" 
    :value="fruit.title"
  >
    {{ fruit.title }}
  </option>
</select>

思考與反饋

除了用在 input 的用法，學習了如何使用在 select 及 radio 並且渲染在畫面上的應用

CODE

連結到 Codepen

Topic​

Result​

思考與反饋​

CODE​

Topic

Result

思考與反饋

CODE