今天我來到了API教程裡的第八節 ----條件渲染

如果你也有看文件的，那麼對於這個 ” v-if “一定不會陌生。這個指令很有趣，能夠直接讓你在對已獲取到的div裡面進行條件執行。請看程式碼：

   <div id="app" >
      <div v-if="type === 'A'">
         A
      </div>
      <div v-else-if="type === 'B'">
         B
      </div>
      <div v-else-if="type === 'C'"
 
>
         C
      </div>
      <div v-else>
         不是A、B、C的div
      </div>
   </div>

1 var data = {
2     type: "B",
3 }
4 var vm = new Vue({
5     el: '#app',
6     data:data,
7 })

如你所見，當我們在data物件裡的type變數命名後，我們可以位元組在#app的子節點裡面進行條件渲染，很簡單，但是很好用！！！這裡渲染的是”B“.

除此之外，還有一個 --- ”v-show“,請看程式碼：

<h1 v-show="ok">Hello Vue!!!</h1>

var data = {
    type: "B",
    ok: true,
}
var vm = new Vue({
    el: '#app',
    data:data,
})

顯而易見，我們可以通過對ok的真值來賦值控制h1的顯示和不顯示，不過這裡需要區分好 v-show 和 v-if的區別的， 他們兩個的功能相似，但是所用的方法確是截然不同的。

比如，v-if的false是直接註釋掉自己所在的div的節點甚至所有子節點全部都註釋了，這塊程式碼完全不生效。而v-show的真值控制的確實style裡面的display屬性，若為false則display為 ”none“ 或者說 ”0“

總而言之，通過v-show來控制div的消失與否比直接用v-if來得要舒服點，v-show控制的display那我們就有了更多的操作餘地。