DAY 10 - 渲染的條件判斷，透過V-if /V-else 顯示畫面

一般 Dom 元素判斷

在一般我們操作 Dom 元素時，我們假入要判斷呈現的畫面，我們需要:

1. 選取 Dom 元素
2. Js 寫入條件 >　判斷情境時改變畫面 (if...else... elseif)
3. Js 下指令改變 Dom 元素
4. 畫面改變

看起來沒有很難，但是非常繁瑣，如果要操作元素一變多或是專案變大就會顯得十分複雜，在 Vue 裡幫大家解決了這個困擾，我們可以透過 v-if /v-else 將條件判斷寫在HTML標籤上，讓他直接呈現畫面，也讓程式碼更易閱讀。

v-if / v-else

v-if 、 v-else 用法跟 JavaScript 的 if、else 一樣，可以判斷何種情境顯示什麼，這邊就不概述，來看看範例寫法 :
在這個範例中我們來定義一個 type ，用來切換對應顯示畫面，當為符合條件時時顯示 v-if ， 否則為顯示 v-else

我們也可以這樣做 :
v-if判斷裡面加入表達式(運算式)，加入type !== false

成功判斷，呈現畫面

面試考題 v-if & v-show 差異呢 ?

v-if - 會直接抽取掉 html ，是操作在 Dom 元素上
v-show - 是透過 CSS 語法 display:none 切換顯示隱藏，雖然畫面隱藏實際上還是存在
另外要注意的是 v-show 不支援 template

範例:
來看看兩者之間差異，我們在畫面同樣用 type 來顯示切換，然後寫好了一個切換的按鈕 ，來試著切換看看，看會發生什麼事

按下切換後，查看更能清楚知道變化，了解兩者之差異

效能上因為 v-if 是直接操作 Dom 元素上，所以相對來說效能上頻繁操作會負擔比較高，而 v-show 則是不會，所以在適當情境下我們可以使用 v-show 而不一定要使用 v-if ，來讓整體網站效能優化更佳。