基礎範例有六個！接下來的實用範例不錯玩唷～
第四個條件與迴圈，應該也不難！一起來實作吧！
缺少 scoped 屬性
在講解第四個範例之前，由於我把所有範例都由App.vue引入同時顯示
發現第二個範例的button的style竟然會影響到第四個範例按鈕
如果在組件的 <style> 標籤中沒有加上 scoped 屬性，樣式會全局生效，導致不同組件的樣式相互影響。確保每個組件的樣式都添加了 scoped
範例4. 條件與迴圈
<script setup>
import { ref } from 'vue'
const show = ref(true)
const list = ref([1, 2, 3])
</script>
<template>
<p>Example 4:</p>
<button @click="show = !show">Toggle List</button>
<button @click="list.push(list.length + 1)">Push Number</button>
<button @click="list.pop()">Pop Number</button>
<button @click="list.reverse()">Reverse List</button>
<ul v-if="show && list.length">
<li v-for="item of list">{{ item }}</li>
</ul>
<p v-else-if="list.length">List is not empty, but hidden.</p>
<p v-else>List is empty.</p>
</template>
<style scoped>
button {
margin: 1em;
}
</style>
<script setup>
- 引入
ref函數：這是 Vue Composition API 的一部分，用於創建響應式數據。 - 創建響應式變數：
show：布林值，控制列表的顯示與否，初始設置為true。list：數組，初始包含三個數字（1, 2, 3）。
<template>
1. 按鈕功能：
- 切換列表顯示：
<button @click="show = !show">Toggle List</button>：點擊這個按鈕會切換show的值，控制列表的顯示或隱藏。 - 推入數字：
<button @click="list.push(list.length + 1)">Push Number</button>：點擊時會在list的末尾添加一個新的數字，該數字是當前list長度加一。 - 彈出數字：
<button @click="list.pop()">Pop Number</button>：點擊時會從list中移除最後一個數字。 - 反轉列表：
<button @click="list.reverse()">Reverse List</button>：點擊時會反轉list的順序。
2. 條件渲染列表：
<ul v-if="show && list.length">：如果show為true且list不為空，則顯示列表。使用v-for渲染list中的每個項目。<p v-else-if="list.length">List is not empty, but hidden.</p>：如果list不為空但show為false，顯示這條訊息。<p v-else>List is empty.</p>：如果list為空，顯示這條訊息
使用者操作的邏輯會影響資料抓取的處理方法，
有兩種方式，一種是把邏輯都寫在後端，一種是塞進前端
邏輯寫在JS裡頭的時候，下次要用到相似的邏輯，
總是覺得很難重複使用～幾乎又要重寫過，SFC把邏輯包在裡頭很方便啊～
