昨天我們學了「雙向通信的引力」，透過 v-model 讓資料和畫面保持同步。
但在宇宙航行的旅途中，不是所有的星門都能隨時開啟，有些星門需要「條件」才能打開。
在 Vue 裡，這個「條件星門」就是 v-if 與 v-show。

1) 什麼是 v-if？

條件為真才會渲染元素。當條件為假，元素根本不會出現在 DOM 裡。
適合「偶爾才會出現」的內容。

v-if範例:

<template>
  <div>
    <h2>🚀 宇宙探險日誌</h2>
    <button @click="warpDrive = !warpDrive">
      切換星門狀態
    </button>

    <p v-if="warpDrive">✨ 星門已開啟！準備進行超光速航行！</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const warpDrive = ref(false)
</script>

解釋：
當 warpDrive 為 true，才會在畫面上生成 <p>，否則 DOM 裡完全不會有這段元素。
就像宇宙星門沒啟動時，你在星圖上找不到它的蹤跡，它根本不存在於航道之中。

2) 什麼是 v-show？

不管條件真假，元素都會渲染，但用 display: none 控制顯示/隱藏。
適合「頻繁切換」的內容。

v-show範例:

<template>
  <div>
    <h2>🌌 星際廣播站</h2>
    <button @click="signal = !signal">
      切換廣播
    </button>

    <p v-show="signal">📡 正在接收來自銀河核心的神秘訊號...</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const signal = ref(true)
</script>

解釋：
即使 signal 為 false，DOM 裡依然存在 <p>，只是加了 style="display: none" 被隱藏。
就像宇宙廣播站的訊號不是消失了，而是暫時關閉收音機。

3)v-if 與 v-show 的比較

指令 | DOM 是否存在 | 適合場合
------------- | -------------
v-if | 條件為假 → 元素不渲染 | 適合像”登入提示“、“載入動畫”這種「很少出現」的畫面（節省效能）
v-show | 元素永遠渲染，用 CSS 切換顯示 | 適合「經常切換」的內容（切換快

4)總結

v-if → 真正的「星門」：只有啟動時才會生成。
v-show → 隱藏/顯示的「廣播訊號」：一直存在，但開關取決於你。

理解這兩種條件判斷，就能在開發中更靈活地決定何時顯示畫面內容。
明天我們要進一步學習 v-for：
如何用迴圈渲染清單、如何在畫面上動態生成多個元素、並理解 key 的重要性，讓畫面能像群星閃耀般自動渲染一整片資料，這會是你在 Vue 專案裡每天都會用到的功能之一。

參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3