Day5 - Vue.js 的基礎魔法：v-if、v-else

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

Topic

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

請使用 v-if 找出價錢大於 25 元的水果，渲染資料

<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">
      <template v-for="(fruit, index) in fruitData" :key="index">
        <div class="col-md-6 mb-3" v-if="fruit.price > 25">
          <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>

思考與反饋

學習 v-if、v-else 的觀念與用法
不要把 v-if 跟 v-for 寫在一起，因為 v-for 優先級比 v-if 高，所以會優先跑 v-for 創造虛擬 DOM 節點之後才做 v-if，造成效能不必要的浪費，並且程式碼也難以理解

CODE

連結到 Codepen

Topic​

Result​

思考與反饋​

CODE​

Topic

Result

思考與反饋

CODE