Day7 - Vue.js 的基礎魔法：v-bind 題目

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

Topic

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

請利用 v-bind 將資料中的 imgUrl 綁定至 img 標籤的 src 屬性，title 資料綁定至 img 標籤上的 alt 屬性

<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%;">
            <img class="card-img-top w-25">
            <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="addProduct(fruit)">加入購物車</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">
      <template v-for="(fruit, index) in fruitData" :key="index">
        <div class="col-md-6 mb-3">
          <div class="card" style="width: 100%;">
            <img class="card-img-top w-25" :src="fruit.imgUrl" :alt="fruit.title">
            <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="addProduct(fruit)">加入購物車</a>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

思考與反饋

學習過了 {{ }}，一開始也是天真的想直接插進去 (因為 React 是這樣代入值的)，然後就出現了錯誤，才發現還有一個 v-bind 的用法

學習的地方

: 是縮寫，寫法會像這樣： :alt=""
v-bind 可以使用 JS 的各種表達式

可以傳入 data 的資料，例：

<input type="text" :value="1 + 1" /> //這裡可以直接傳入表達式
<input type="text" :value="text" /> //或傳入 data 的值

//...
const text = ref('這是一段話');

CODE

連結到 Codepen

資訊

這裡看陳述式 vs 表達式

Topic​

Result​

思考與反饋​

學習的地方​

CODE​

Topic

Result

思考與反饋

學習的地方

CODE