跳至主要内容

Day10 - Vue.js 的黑魔法：computed

備註

本站 Vue 的撰寫風格都是 Composition API

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

Topic​

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

  • 小明若要把全部水果都買下來，需要花多少錢 ? (請利用 computed 的方式，將全部水果總價錢計算出來 ( 價錢 * 數量 )，並且正確呈現在畫面上。)
<template>
  <div id="app" class="container">
    <div class="total-price mt-3">
      <h4>總價：{{ totalPrice }} 元</h4>
    </div>
    
    <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 :src="fruit.imgUrl" class="card-img-top w-25" :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>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } 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​

<script setup>
import { ref, computed } from "vue";
const totalPrice = computed(() => {
  return fruitData.value.reduce((pre, item) => (pre += item.price * item.count),0)  
})
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>

思考與反饋​

  • 我一開始有點誤會了，我以為 computed() 就是 reduce() 的功能，限制了我的思考，這些比較像是 useState 在監控變動的狀態，這裡補充閱讀 響應式 API

學習的地方​

  • 範例任務是將價格加總，我就問了 Gemini 常見的情境有哪些，然後試著練習了常見的篩選功能的寫法

CODE​