摘要：并在上面使用，最終渲染結(jié)果將不包括元素。另外一個(gè)根據(jù)條件展示元素的指令，用法與大致相同。注意，不支持元素，也不支持與看完了文章，你會(huì)發(fā)現(xiàn)我們可以利用和兩個(gè)指令來(lái)控制我們?cè)氐男袨椤?/p>

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

我的理解就是：指令是用來(lái)控制 DOM 元素的行為，例如最簡(jiǎn)單的顯示，隱藏。

Vue 中有很多指令，在今后的學(xué)習(xí)過(guò)程總我們會(huì)逐步的學(xué)習(xí)，今天我們就來(lái)說(shuō)說(shuō)我們非常常用的兩個(gè)條件指令 v-if 和 v-show。

看到 v-if 你肯定會(huì)想到 Javascrip 中的 if else 條件判斷語(yǔ)句，你會(huì)想是不是還會(huì)有 v-else 指令，沒(méi)錯(cuò) Vue 中不僅給我們提供了 v-else 指令而且還給我們提供了 v-else-if指令。

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

怎么樣，通過(guò)我這么一說(shuō)你對(duì) if 指令有了更清楚的認(rèn)識(shí)了吧？

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

好吧，我覺(jué)得我解釋的還行，如果你覺(jué)得不行，我們就直接一點(diǎn)擼代碼寫(xiě)個(gè)案例，讓你一看就懂。

    
你看不見(jiàn)我，你看不見(jiàn)我，你看不見(jiàn)我

執(zhí)行上面的代碼，你會(huì)發(fā)現(xiàn)頁(yè)面上除了什么都沒(méi)有，還是什么都沒(méi)有，總之你什么都看不見(jiàn)，就是不讓你看見(jiàn)，怎么辦？

我告訴你這個(gè)非常好辦呀，把它打出來(lái)就行了，我們?cè)跒g覽器的控制臺(tái)打 vm.isShow=true 你就能看出效果了，不信？那我們就來(lái)試試。

看到了上面這個(gè)神奇的效果，我們?cè)賮?lái)思考一個(gè)問(wèn)題，我們上面是在切換單個(gè) DOM 元素，我們能不能來(lái)切換多個(gè)元素或者說(shuō)嵌套元素呢？

    

      
你看不見(jiàn)我，你看不見(jiàn)我，你看不見(jiàn)我
      
呀，好像被你發(fā)現(xiàn)了！
    

正如我們的預(yù)期一樣，我們嵌套多層元素也是沒(méi)有問(wèn)題的，效果還是那個(gè)效果。不過(guò)在 Vue 中推薦我們使用