###### tags: `vue`, `front-end`, `javascript`
# 【自學筆記】從0開始學Vue - Day5 關於 v-if 與 v-show 的差異

關於Vue，一直以來都多少有接觸，但都沒有好好的理解過它
就來做個一系列的學習筆記，紀錄學習Vue的過程吧
基本上就以到處拜讀前輩大神的文章，並整理成我理解的文字的方式進行

---

vue的條件渲染真的很方便
大致可以分為`v-if`跟`v-show`兩種方式

:::info
**v-if , v-else-if , v-else**
:::

相信大家對於`if`/`else`/`elseif`應該都不陌生，跟我們平常寫`Javascript`挺相似的，但是直接在HTML標籤加上`v-if`/`v-else`/`v-else-if`進行判斷決定要顯示的資料內容。

例如

<div id="app">
    <div v-if="link === 'google'">google</div>
    <div v-else-if="link === 'facebook'">facebook</div>
    <div v-else>another</div>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        link: "google" // google, facebook, ...
    }
});

:::info
**v-show**
:::

`v-show`的用法跟`v-if`大致相同

<div id="app">
    <div v-show="isShow">條件成立</div>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        isShow: True // google, facebook, ...
    }
});

非常單純好懂，但既然這麼像，兩者又有甚麼區別呢 :confused:

:::info
**v-if 跟 v-show 的差別**
:::

1. **是否有 else 情況**
兩者主要差別在於==是否有 else 的狀況==，若有其他狀況也需要呈現資料，則使用`v-if`；否則大致上`v-if`和`v-show`效果相同。
2. **HTML 元素隱藏與否**
使用`v-if`==僅出現符合條件的HTML元素==，進而渲染畫面。
使用`v-show`==所有的HTML元素都會出現==，再透過`inline style`將不符合的資料`display:none`，如下例。

<div id="app">
  <div v-show="IsShow">show!!</div>  
  <div v-show="!IsShow">Not show!!</div>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        IsShow: true 
    }
});

結果會是這樣 :arrow_down:

3. **是否搭配template使用**
若使用template模板只能透過`v-if`判斷，無法搭配`v-show`使用。

---

*參考資料: https://reurl.cc/loX8Xd*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*