例1 
<div v-if="Math.random() > 0.5">
         Now you see me
    </div>
     <div v-else>
         Now you don't
     </div>
 
    <div v-if="num==10">
        num = {{num}}
     </div>
   <div v-else>
        num != 10     </div>

例2

<div v-if="message==='A'">
         str = {{message}}
     </div>
     <div v-else-if="message==='B'">
         str = {{message}}
     </div>
     <div v-else-if="message==='C'">
         str = {{message}}
     </div>
     <div v-else>
         str = null
     </div>

v-show  & v-if

　v-show也是根據條件展示元素的指令。帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。

　　v-show 不支援 <template> 語法，也不支援 v-else。

　　兩者之間的區別：

　　v-if :1.是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

　　　　 2.是惰性的，只有當條件為true時才會渲染，如果條件為false則什麼都不做

　　　　 3.有很高的切換開銷，適用於條件不太容易改變的時候

　　v-show:1.不管條件是true還是false都會進行渲染。並且只是簡單地基於 CSS 進行切換

　　　　　   2.有很高的初始渲染開銷，適用於非常頻繁地切換

v-if 和v-for 混合使用示例

  <div v-for="message in messageList" v-if="message.test == 'vue.js'">
      {{message.test}}
    </div>
     <br>------------完美的分隔線--------------</br>

     <div v-for="message in messageList">
         <span v-if="message.test == 'vue.js'">{{message.test}}是一種很好用的前臺框架</span>
         {{message.test}}
     </div>