這次我們不聊「綁定」了XD 我們來聊聊比較簡單的，也就是「條件」，相信各位讀者應該對這個不陌生吧？這篇的概念會非常簡單，因此我們會快速帶過去。

想到條件，讀者會想到啥呢？不外乎就是「if、else、true、false」，恩.. 本篇快講完了（X
舉個最常見的例子：你去做健康檢查，醫生會幫你測身高體重，然後算出 BMI，最後根據數值告訴你「過輕、正常、過重或肥胖」。

TS內的「if」

其實不難理解，直接上 code：

<script setup lang="ts">
if (條件) {
  // 做什麼事情
} else if (條件) {
  // 做什麼事情
} else {
  做什麼事情
}
</script>

未來我們也會看到非常多 if。比較需要講解的是 v-if 和 v-show。

v-if 的基本用法

v-if 很好理解，直接上例子：

<template>
  <div>
    <p v-if="bmi < 18.5">過輕</p>
    <p v-else-if="bmi >= 18.5 && bmi < 24">正常</p>
    <p v-else-if="bmi >= 24 && bmi < 27">過重</p>
    <p v-else>肥胖</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const bmi = ref(20)
</script>

應該不難理解，當 bmi 的值不同，就會顯示不同的結果：

• 如果 bmi < 18.5 → 顯示「過輕」
• 如果 bmi >= 18.5 → 顯示「正常」
• 如果 bmi >= 24 → 顯示「過重」
• 如果 bmi >= 27 → 顯示「肥胖」

v-show

除了 v-if，還有一個叫做 v-show。他們兩個很像，但差別在於 v-if 如果條件不成立，則整個 DOM 都會被移除或是新增。如果是 v-show，則就只是在 css 加上 display: none。

舉例：

<template>
  <div>
    <button @click="toggle">切換顯示結果</button>
    <p v-show="showResult">你的 BMI 是 {{ bmi }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const bmi = ref(22)
const showResult = ref(true)

function toggle() {
  showResult.value = !showResult.value
}
</script>

這邊可以看到，當我切換之後，則 <p>會只是象徵性的「隱藏」（css: display: none），但你實際透過 console 檢查去看，DOM其實還在。如果是經常切換顯示的場景（像這個例子），會推薦用 v-show，效能會比較好。

練習：登入登出系統

題目：請讀者做一個「登入/登出」的切換系統。

• 預設狀態是未登入，顯示「請先登入」
• 當按下登入按鈕時，顯示「歡迎回來」
• 當已登入時，按下登出按鈕又會回到未登入

解答

<template>
  <div>
    <h1 v-if="isLogin">歡迎回來，{{ username }}</h1>
    <h1 v-else>請先登入</h1>
    <button @click="toggleLogin">
      {{ isLogin ? '登出' : '登入' }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isLogin = ref(false)
const username = ref('小美')

function toggleLogin() {
  isLogin.value = !isLogin.value
}
</script>

當切換登入或是登出之後，就會相對應出現值。

本文結尾

今天我們聊了條件渲染，包含 v-if、v-else-if、v-else，還有 v-show 的差別。其實更多的還是在解釋 v-show 與 v-if 的不同，其實條件是非常簡單的。下一篇，我們就要來聊「迴圈渲染」。畢竟很多時候不只是一段條件，而是要把一整組清單渲染出來。