v-if/v-else/v-else-if 的用法，其實跟我們在撰寫 JavaScript 的判斷式有點雷同，不過在 Vue.js 可以直接在 HTML 標籤加上 v-if/v-else/v-else-if 進行資料判讀，進而決定要顯示哪一種的資料內容。
以下分為兩個案例來介紹：
使用 v-if, v-else 切換物件呈現
使用者希望透過勾選的方式來變更狀態，有「成功」狀態與「失敗」狀態，而系統預設為「成功」。
在上述程式碼，我們透過 checkbox 來變更 app 應用程式中 data 的 isSuccess 變數，預設為 true。
當 isSuccess 為 true 時，符合 v-if='isSuccess' ，畫面顯示為「成功」狀態，反之，當使用者點擊 checkbox 改變 isSuccess 為 false 時，則符合 v-else='!isSuccess' ，即切換為「失敗」狀態。
示意圖如下：
使用 v-else-if 做出分頁頁籤
使用者希望可以透過點擊分頁標籤，進而切換分頁的內容。
如同點擊「分頁A」時，為「內容A」的資料，點擊「分頁B」則顯示「內容B」的資料，最後，點擊「分頁C」則顯示「內容C」的資料。
下面提供一個範例示意圖，幫助大家有個初步的概念。
接下來，讓我們來看程式碼吧～
程式碼執行邏輯如下：
Step 1：透過 v-on:click.prevent 事件變更 link 的資料內容，例如：點擊分頁 B 時，則將 link 的資料變更為 'b'
Step 2：透過 :class={''} 依照 link 的資料內容動態切換 active 樣式
Step 3：透過 v-if / v-else-if / v-else-if 的預設條件，例如： link=='c' 時，則顯示「內容 C」的資料
透過 v-else-if 的功能，不僅能依照資料動態調整該顯示的分頁內容，也在實作分頁頁籤時，更有效率的滿足開發和使用者需求。
v-if 與 v-show 的差異
最後，由於v-if 和 v-show 常被放在一起討論，因此，也簡單補充一下他們之間的使用差異。
1. 是否有 else 情況
兩者使用上，主要差別在於是否有 else 的狀況，若有其他狀況也需要呈現資料，則使用v-if；否則大致上v-if和v-show效果相同。
2. HTML 元素隱藏與否
使用v-if僅會出現符合條件的 HTML 元素，進而渲染畫面。
而v-show則會讓所有的 HTML 元素出現，再透過行內樣式（inline style css）將不符合的資料以 display:none隱藏，如下圖。
3. 是否有搭配 template 使用
若需要使用 template 模板，只能透過 v-if決定 template 模板是否出現，但無法搭配v-show 使用。
謝謝你的閱讀！如果有任何想法，也歡迎留言與我分享～如果願意給我一些小小鼓勵，請給我 1–20 個拍手；
如果覺得文章對你有點幫助，請給我 21-30 個拍手；如果非常喜歡我的技術筆記，請長按拍手按鈕（50個拍好拍滿）讓我知道哦 👏🏻最後，若希望持續追蹤我的最新文章，別忘了追蹤 皮爾斯的自學旅程 唷，乾溫 :D
