Vue系列之條件渲染（五）

之前介紹了v-bind和v-on指令，今兒來介紹一下vue的條件渲染。一般的頁面開發中會依據不同的判斷條件來控制dom是否顯示在頁面上，以及dom元素是否存在。本章節就重點介紹v-if和v-show指令。

1. v-if

v-if指令用於動態的渲染一部分內容，通過js語句返回為true時dom元素被渲染；反之，不存在。，舉個栗子：

看到我啦我消失啦

大家知道 if 和 else 是一對難兄難弟，既然有了 v-if 指令**又少的了 v-else 呢~ 畢竟公升級打怪的路上是多麼的不容易，咳咳，言歸正傳！！v-else 表示不論 v-if 的最終結果是什麼，它都將顯示它的另一面。啃個栗子：

看到啦沒看到

在上例中，當seen為true時，顯示看到啦；當seen為false時，顯示沒看到。因為v-if和v-else為指令，所以它們必須新增在元素上，上面的兩個例子都是加在單個元素上，還可以加在上。

看到啦沒看到

貼心的vue還為我們提供了v-else-if，想必大家都猜到了，它是用來實現 v-if 的 else-if 的功能。

aaa b c

注意：v-else和v-else-if指令必須緊跟在v-if或者v-else-if的指令後面，不然不會被識別。2. v-show

v-show也是渲染元素的一種方式，它與v-if的不同之處在於：v-if是僅有在條件為true的時候，才會渲染dom, 而v-show不論結果如何，都會渲染dom, 並依據結果顯示或隱藏。

在頻繁對dom的顯隱進行操作的時候，推薦使用v-show，這樣的成本開銷最小，效能會更佳。

關注「前端怪咖」，加入我們，一起提公升前端技能