v-if、 v-else、v-else-if指令用於條件性地渲染一塊內容。
這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。

v-if and v-else

DEMO

<div class="box">
    <div class="alert alert-success" v-if="like">我愛吃薯條 : )</div>
    <div class="alert alert-danger" v-if=" !like> 我不愛吃薯條 : (</div>
    <input type="checkbox" id="like" v-model="like"/>
    <label for="like">喜歡吃薯條嗎?</label>
 </div>

v-if=" !like " 可用 v-else 代替
但必須緊連v-if 或v-else-if元素後面否則它將不會被識別

<div class="box">
    <div class="alert alert-success" v-if="like">我愛吃薯條 : )</div>
    <div class="alert alert-danger" v-else="v-else"> 我不愛吃薯條 : (</div>
    <input type="checkbox" id="like" v-model="like"/>
    <label for="like">喜歡吃薯條嗎?</label>
 </div>

template 標籤 與 v-if

template標籤可將更多元素群組化，可一次切換多個元素
且template標籤，並不會被輸出喔！

<div class="box">
    <p>今天消夜吃</p>
    <template v-if="foods">
      <div class="pic"> <img src="vue.js/food1.jpg" alt=""/></div>
      <div class="pic"><img src="/vue.js/food2.jpg" alt=""/></div>
      <div class="pic"><img src="/vue.js/food3.jpg" alt=""/></div>
    </template>
    <input type="checkbox" id="foods" v-model="foods"/>
    <label for="foods">看看今天消夜吃什麼?</label>
  </div>

v-else-if 製作分頁頁籤

v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後

 <div class="box">
    <ul class="nav nav-tabs">
      <li class="nav-item">
         <a class="nav-link" href="#" 
             :class="{'active' : visibility == 'one'}" 
             @click.prevent=" visibility = 'one'">薯條</a></li>
      <li class="nav-item">
          <a class="nav-link" href="#" 
              :class="{'active' : visibility == 'two'}"
              @click.prevent=" visibility = 'two'"> 甜不辣</a></li>
      <li class="nav-item">
          <a class="nav-link" href="#" 
              :class="{'active' : visibility == 'three'}"
              @click.prevent=" visibility = 'three'"> 雞排</a></li>
    </ul>
    <div id="main">
      <div class="pic" v-if="visibility == 'one'"><img src="/vue.js/food1.jpg" alt=""/></div>
      <div class="pic" v-if="visibility == 'two'"><img src="/vue.js/food2.jpg" alt=""/></div>
      <div class="pic" v-if="visibility == 'three'"><img src="/vue.js/food3.jpg" alt=""/></div>
    </div>
  </div>

var vm = new Vue({
  el: '#app',
  data:{
    visibility: 'one',
  },
})

使用 key 管理可重複用的元素

vue會盡可能高效地渲染元素，通常會重復用已有元素而不是從頭開始渲染，
所以在切換的時候不會清空input裡面輸入的內容，
因為兩個模板使用了相同的元素，input 不會被替換掉而僅是替換了它的 placeholder

若希望能有效區別，可以分別在元素上面加上 :key
加上:key 之後，每次切換時，輸入框都將被重新渲染

div class="box">
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" :key="1"/>
    </template>
    <template v-else="">
      <label>Email</label>
      <input placeholder="Enter your email address" :key="2"/>
    </template><br/>
    <button class="btn btn-info" @click="toggle">轉換 </button>
  </div>

v-if 與 v-show

v-if條件為true時會把內容的DOM渲染出來，條件為false時會把DOM移掉
v-show是通過設置DOM元素的display樣式屬性控制顯隱，不管初始條件是什麼，元素總是會被渲染，並且只是簡單的基於 CSS 進行切換
v-if 狀態

v-show

<div class="box">
    <div class="alert alert-success" v-show="show">我愛吃薯條 : )</div>
    <input type="checkbox" id="show" v-model="show"/>
    <label for="show">喜歡吃薯條嗎? </label>
</div>

v-if 與 v-for

當它們處於同一節點，v-for 的優先級比 v-if 更高
這意味著 v-if 將分別重複運行於每個 v-for 循環中

<div class="box">
    <div class="number"><span v-for=" item in 10" v-if="item % 2 ===1">{{item}}</span></div>
  </div>

v-for 迴圈判斷成立之後才會執行 v-if 、v-else
列範例之中 todos 中沒有任何東西，固v-for 迴圈沒有成立，接下來的 v-if及v-else也都不成立

  <div class="box">
    <ul>
      <li v-for="todo in todos" v-if="todos.length">{{ todo }}</li>
      <p v-else="v-else">No todos left!</p>
    </ul>
  </div>

明天繼續烤肉嗎?