前言

在 Vue 開發中，我們經常需要根據條件顯示或隱藏特定 DOM 元素。

常見的情境有：

• 表單錯誤訊息只在輸入驗證失敗時顯示。
• API 請求後才顯示資料、SSR 導致的錯誤。
• 根據使用者角色顯示不同按鈕。
• 等等等等

Vue 提供了 v-if、v-else-if、v-else、v-show，
四種主要方式來處理條件渲染。

雖然它們看起來類似，但在效能、DOM 操作方式、使用時機上差異很大。

搞清楚這些差別會讓你對於 前端做條件渲染 會有蠻不錯的理解，
同時會帶到 <Transition> 這個內置組件跟條件渲染的搭配使用。

使用

v-if

一樣需要依附在 HTML element 裡面，是無法單獨存在的，
這個 h1 會在 v-if 後面的 expression 成立 ( true ) 的時候才會被渲染出來。

<template>
    <h1 v-if="isIronMan">你超讚!</h1>
    <!-- 等價於 -->
    <h1 v-if="isIronMan === true">你超讚!</h1>
</template>

v-else

<template>
    <button @click="isIronMan = !isIronMan">開關</button>
    <!-- 如果真的可以有個開關就好了 QQ -->

    <h1 v-if="isIronMan">你超讚!</h1>
    <h1 v-else>沒關係，遊戲才剛開始呢!</h1>
</template>

這邊要注意的是 else 後面是不需要 expression 的，
就跟一般的 if / else 一樣，前面的條件都不成立時執行。

v-else-if

當你需要多個條件判斷時就可以使用 v-else-if，
常見於 不同條件要顯示的區塊差異太大 不適合合併成一個。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

單從畫面上來看的話 v-if 跟 v-show 都是控制顯示與否，
但從程式碼來看的話就不太一樣了。

▲ * v-if & v-show 差異圖 1，開啟狀態*

▲ * v-if & v-show 差異圖 2，關閉狀態*

<Transition>

<Transition> 是一個內置組件，
不需要 import，不需要註冊，任意組件中都能使用。

但要注意一點 <Transition> 所包住的子元素只能有一個節點。

<script setup>
import { ref } from 'vue'

const show = ref(false);
</script>

<template>
  <div style="padding:16px">
    <button @click="show = !show">點我</button>
    <Transition name="fade">
      <p v-if="show" class="box">訂閱按讚分享!</p>
    </Transition>
  </div>
</template>

<style scoped>
.box {
// 略
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 200ms ease, transform 200ms ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}
</style>

<Transition> 是透過六個階段的 CSS 去做過渡效果

• v-enter-from
• v-enter-active
• v-enter-to
• v-leave-from
• v-leave-active
• v-leave-to

而這前面的 v 是可以替換成你自己想要叫什麼名稱，假設是 slide，

那你的 v-enter-from 就要取成 slide-enter-from，其他以此類推，
並不是你取叫什麼就是什麼效果，效果還是你自己定義的。

<Transition name="slide">
  ...
</Transition>

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.5s ease;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
}
/* 這邊我雖然是取叫 slide，但裡面的效果卻是漸變消失，
這樣就不匹配，名字只是讓 Vue 可以去找到相關 class 。*/

這邊就不介紹太多 <Transition> 的內容，不然重點跑偏了，
不過還是提供文件跟 遊樂場 讓大家感受一下。

結語

一樣是非常基礎但很重要的一篇，
我們帶過了 v-if / v-else / v-else-if 的基礎用法，
比較了 v-if 跟 v-show 這兩個看起來很像，但實際上不一樣的指令。

我印象中有人問過我 v-if 到底是什麼，我甚至沒思考過這是可能看不太懂得部分，
個人認為這蠻直覺的，在 Vue 過氣前要學的第十件事 - 從打好基本功開始 / Directives我們有聊到說指令就只是一段程式碼，
所以也只是讓你在 DOM 元素上多個條件判斷而已，其實不是太複雜複雜的東西。

同時加入了 <Transition> 這個內置組件，讓你無須安裝套件就能快速配置動畫，
如果你喜歡這個系列或是想看我發瘋，歡迎按下 訂閱 一起走完這三十天吧，
今天就這樣嚕，大家ㄅㄅ。

一些小練習

1. v-if 通常會放在什麼裡面?
2. v-if / v-else / v-else-if 之中，哪個指令是可以不用跟其餘兩者搭配使用的?
3. v-if 跟 v-show 同樣都是為了限制組件顯示，實際上有什麼差異?