摘要：并在上面使用，最終渲染結果將不包括元素。另外一個根據條件展示元素的指令，用法與大致相同。注意，不支持元素，也不支持與看完了文章，你會發現我們可以利用和兩個指令來控制我們元素的行為。

熟悉 Angular 的同學對指令肯定不會陌生，Vue中也借鑒了指令這一特性，在 Vue 中指令都是帶有 v- 的特殊屬性，那么指令有什么作用呢？

我的理解就是：指令是用來控制 DOM 元素的行為，例如最簡單的顯示，隱藏。

Vue 中有很多指令，在今后的學習過程總我們會逐步的學習，今天我們就來說說我們非常常用的兩個條件指令 v-if 和 v-show。

看到 v-if 你肯定會想到 Javascrip 中的 if else 條件判斷語句，你會想是不是還會有 v-else 指令，沒錯 Vue 中不僅給我們提供了 v-else 指令而且還給我們提供了 v-else-if指令。

既然這樣我們就很好理解 v-if 指令了，其實就是根據表達式的值是真(true)假(false)來重建或者銷毀一個我們綁定的 DOM 元素。

怎么樣，通過我這么一說你對 if 指令有了更清楚的認識了吧？

什么東西啊，你這叫解釋的還行？（有些人）

好吧，我覺得我解釋的還行，如果你覺得不行，我們就直接一點擼代碼寫個案例，讓你一看就懂。

    
你看不見我，你看不見我，你看不見我

執行上面的代碼，你會發現頁面上除了什么都沒有，還是什么都沒有，總之你什么都看不見，就是不讓你看見，怎么辦？

我告訴你這個非常好辦呀，把它打出來就行了，我們在瀏覽器的控制臺打 vm.isShow=true 你就能看出效果了，不信？那我們就來試試。

看到了上面這個神奇的效果，我們再來思考一個問題，我們上面是在切換單個 DOM 元素，我們能不能來切換多個元素或者說嵌套元素呢？

    

      
你看不見我，你看不見我，你看不見我
      
呀，好像被你發現了！
    

正如我們的預期一樣，我們嵌套多層元素也是沒有問題的，效果還是那個效果。不過在 Vue 中推薦我們使用