v-if / v-else 使用細節

v-if v-else 可以用來做切換物件呈現、或是過濾滿足條件的呈現
範例一 :

//寫法一
<div v-if=" isGirl === true ">是女生</div>
<div v-if=" isGirl === false ">是男生</div>

//寫法二
<div v-if="isGirl">是女生</div>
<div v-if="!isGirl">是男生</div>

//寫法三
<div v-if="isGirl">是女生</div>
<div v-else>是男生</div>

範例二 :

<li v-for="item in dataArray" v-if="age > 30">
{{item.name}}
</li>

v-if 與 template標籤

我們可以透過v-if來切換內容呈現，例如下面表格範例:
我們可以透過 input-checkbox 來toggle上 showTemplate 的 true/false
最一開始設置為false讓它隱藏，再toggle上true讓表格顯示

<table>
    <tr v-if="showTemplate">
        <td>1</td>
        <td>text1</td>
    </tr>
    <tr v-if="showTemplate">
        <td>2</td>
        <td>text2</td>
    </tr>    
</table>

這樣做的缺點是，我需要在每行上都加上 v-if="showTemplate"
為了讓他更簡單，我們可以改用 template 標籤

關於 template 標籤

template 標籤 根據 MDN 的解釋 :
是用作保存用戶端內容的機制。該內容在頁面載入時不受渲染，但可以在運行時使用 JavaScript 實例化。

vue.js的好處呢!就是可以一樣使用template啦!
我們可以在template標籤，放上vue的指令，來控制他的呈現。

<table>
    <template v-if="showTemplate">
        <tr>
            <td>1</td>
            <td>text1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>text2</td>
        </tr>    
    </template>
</table>

透過 v-else-if 製作分頁頁籤

CodePen 實做

1. 設置一個data資料為 點選到哪個頁面 (Link)
2. 點擊切換時，會讓 頁面值(eg: 設首頁為'a';其他分頁為'b''c') 賦值到 link 上
3. 使用 v-if、v-else-if、v-else 來判斷現在點擊的是哪個 link

運用 v-if、v-else-if、v-else 時，一定要注意需要放置在一起，才能告知程式它有連帶關係

重要的 KEY

不管是在做 v-for v-if，在使用 Vue 時 key 非常的重要!
在運作時，當切換的畫面資料中，有相同的元件，Vue 就會以快速置換(非常高效能)的方式切換，但是這樣的快速切換往往會導致我們的資料跑掉，所以我們才會需要補上 唯一 KEY 值。
當KEY值不同時，就會進行重新渲染

v-if 與 v-show 差別

v-if

會直接把動元素移除

<div class="box bgRed" v-if="isShowed">
<div class="box bgBlue" v-if="!isShowed">

當 isShowed === true 切換時:

<div class="box bgRed" v-if="isShowed">
<div class="box" v-if="!isShowed">

v-show

會透過加入和刪除 style="display: none;"

<div class="box bgRed" v-show="isShowed">
<div class="box bgBlue" v-show="!isShowed">

當 isShowed === true 切換時:

<div class="box bgRed" v-show="isShowed">
<div class="box bgBlue" v-show="!isShowed" style="display: none;">