上一篇 介紹了通過vue.js綁定class和style樣式，這次我們一起學(xué)習(xí)vue.js中的條件渲染。
- v-if指令（這個(gè)前面介紹過）
<h1 v-if="ok">Yes</h1>
- v-else
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
因?yàn)?v-if是一個(gè)指令，需要將它添加到一個(gè)元素上衅金。但是如果我們想切換多個(gè)元素呢存淫？此時(shí)我們可以把一個(gè) <template>元素當(dāng)做包裝元素，并在上面使用 v-if顺少，最終的渲染結(jié)果不會(huì)包含它。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
- v-if中也可以添加js內(nèi)置函數(shù)王浴，如：
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
注意：v-else元素必須立即跟在 v-if元素的后面——否則它不能被識(shí)別脆炎。
- v-show
v-show的用法和實(shí)現(xiàn)效果和v-if基本一樣
<h1 v-show="ok">Hello!</h1>
不同的是有 v-show的元素會(huì)始終渲染并保持在 DOM 中。v-show是簡(jiǎn)單的換元素的 CSS 屬性 display氓辣，而且v-show不支持 <template>語法秒裕。
- 最后是v-if和v-else的比較
在切換 v-if 塊時(shí)，Vue.js 有一個(gè)局部編譯/卸載過程钞啸，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件几蜻。v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件体斩。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假梭稚，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會(huì)被緩存起來）。
相比之下絮吵，v-show 簡(jiǎn)單得多——元素始終被編譯并保留弧烤，只是簡(jiǎn)單地基于 CSS 切換。
一般來說蹬敲，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗暇昂。因此，如果需要頻繁切換 v-show 較好伴嗡，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好急波。
列表渲染是在網(wǎng)頁中非常常見的功能，我們大多數(shù)時(shí)候都在與其打交道瘪校，下篇文章我們將一起學(xué)習(xí)vue.js中的更多的關(guān)于列表的操作澄暮。
