一 ： v-if

1. 作用 ： 判斷是否載入固定的內容，如果為真，就載入，否則不載入
2. 用處 : 用在許可權管理，頁面載入
3. 語法 : v-if="判斷表示式"
4. 特點 : 控制元素插入或刪除，而不是隱藏（v-show是隱藏）
5. v-if與v-show的區別 :

• v-if的安全級別更高，v-show只是隱藏了，通過頁面原始碼還是可以看到，安全級別低、
• v-if更高的切換消耗（切換消耗指從未載入到載入或者從載入到未載入的狀況，需要新增或刪除這個元素），v-show需要更高的初始化渲染消耗
• 因此如果需要頻繁切換而對安性無要求，使用v-show；如果執行時，條件不能改變，使用v-if

6.v-if和v-for的區別 : 當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先順序。
舉個栗子1

<div id="app">
    <h1 v-if="status == 'ok' ">yes</h1>
    <h1 v-else>no</h1>
</div>
var app = new Vue({
    el : '#app',
    data : {
        status : 'ok'
    }
});

執行結果 ：app.status = 'ok' 則顯示yes，status=任何其他的值都顯示no
栗子2

<template v-if="status == 'ok'">
    <h1>title</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
</template>

執行結果 ： 條件成立時，這三條語句同時顯示在頁面上

 title
 paragraph 1
 paragraph 2

拓展一點：
template用於包裹純文字或者沒有大的父級元素包裹的情況下，比如一段文字需要載入，而沒有別的元素包裹它，就可以用template來包裹

栗子3

<div id="app4">
    <p v-if="seen">v-if根據條件顯示與隱藏</p>
</div>
var app4 = new Vue({
    el : '#app4',
    data : {
        seen : true
    }
})

執行結果 ：

從上述動圖我們可以看到 ： v-if如果判斷不成立，就不會在DOM中渲染，也不會將對應的語句顯示在頁面上

二 ：v-else

v-else要緊跟在v-if後面，表示v-if條件不成立時執行

三 ： v-else-if

表示多次，在v-if和v-else中間
栗子4

<div id="app5">
    <div v-if="status == 'loading'"> 
        <div style="background-color:blue">loading</div>
    </div>

    <div v-else-if="status === 'success'">
        <div style="background-color:green">success</div>
    </div>

    <div v-else="status == 'fail'">
        <div style='background-color:red'>fail</div>
    </div>
</div>
var app5 = new Vue({
    el : '#app5',
    data : {
        status : 'loading'
    }
})

執行結果 ：