vue.js中的條件渲染（v-if/v-else/v-else-if/v-show）

1、在vue,.js中使用v-if進行條件判斷，可以使用v-else指令給v-if添加一個else塊，v-else指令必須緊跟在v-if或者v-else-if元素的後面，否則它將不會被識別。當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。

 <!-- 使用v-if進行條件渲染 -->
    <div id="#app">
        <p v-if="ok">加油，你是最棒的</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                ok:true
            }
        })
    </script>

 <!-- 使用v-if和v-else -->
    <div id="app">
        <p v-if="ok">加油，你是最棒的</p>
        <p v-else>你要繼續加油哦</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                ok:true
            }
        })
    </script>

2、因爲v-if是一個指令，所以必須將它添加到一個元素上，如果想要切換多個元素，此時可以將一個<template>元素當做不可見的包裹元素，並在上面使用v-if進行渲染分組，最終的渲染結果將不包含<template>元素

 <!-- 在template上使用v-if進行渲染分組 -->
    <div id="app">
        <template v-if="ok">
            <h1>今天是新的一週</h1>
            <p>你要加油哦</p>
        </template>
        <template v-else>
            <h1>今天是新的一週</h1>
            <p>你要繼續努力</p>
        </template>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                ok:false
            }
        })
    </script> 

3、v-else-if是在vue.js2.1.0中新增的，用作v-if的else-if塊，可以鏈式的多次使用

 <!-- 使用v-else-if -->
   <div id="app">
        <p v-if="type==='A'">A</p>
        <p v-else-if="type==='B'">B</p>
        <p v-else>notA/B</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                type:'C'
            }
        })
    </script> 

4、另一個用於根據條件展示元素的選項是v-show指令，不同的是帶有v-show的元素始終會被渲染並保留在DOM中，簡單的說v-show只是簡單地切換元素的css屬性的display，但是v-show不支持template元素，也不支持v-else。

 <!-- 另一個根據條件展示元素的指令v-show -->
    <div id="app">
        <p v-show="ok">我是v-show</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                ok:false
            }
        })
    </script>
    <!-- 展示結果中相當於給p元素添加了display:none的樣式 -->

5、v-if&v-show

v-if 是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

【練習題】

1、隨機生成一個數字，判斷是否大於0.5，然後輸出對應的信息

 <!--隨機生成一個數字，判斷是否大於0.5，然後輸出對應的信息  -->
   <div id="app">
       <p v-if="num>0.5">隨機產生的數字{{num}}大於0.5</p>
       <p v-else>隨機產生的數字{{num}}小於或者等於0.5</p>
   </div>
   <script>
       new Vue({
        el:"#app",
        data:{
            num:Math.random()
        }
       })
   </script>