EP18 - ex4. Conditionals and loops

基礎範例有六個！接下來的實用範例不錯玩唷～
第四個條件與迴圈，應該也不難！一起來實作吧！

缺少 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把邏輯包在裡頭很方便啊～