Vue 中的條件渲染
今天說一下 Vue 中的條件渲染端仰，通俗的說就是條件判斷泳猬，判斷各種條件是否執(zhí)行戚长。
新建一個最簡單的 Vue 實例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 中的條件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var app = new Vue({
el: "#app"
})
</script>
</body>
</html>
先介紹一個 v-if 指令盗冷，編輯一下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 中的條件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 新指令 v-if -->
<div v-if="show">{{ message }}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
show: false,
message: "Hello World"
}
})
</script>
</body>
</html>
v-if 等于后面跟著的依然是一個 JavaScript 表達(dá)式，這個表達(dá)式的 true 和 false 同廉，也就是它的返回值決定了這個 div 標(biāo)簽是否被真實的掛載到頁面之上仪糖「趟荆看一下上面的代碼，我在 data 里定義了兩個數(shù)據(jù)锅劝， shwo 和 message 攒驰，show 是一個布爾值，也就是真假， message 是一個人普通字符串?dāng)?shù)據(jù)牙勘，之前也看過很多次了橄仍。我們把 show 放到 v-if 后面的雙引號里，現(xiàn)在 show 的值是 false 奶段，很顯然這個元素就不會掛載在頁面上，在瀏覽器上我們看不到 Hello World 的輸出剥纷。打開瀏覽器看一下:
show 為 false 時痹籍，<div v-if="show">{{ message }}</div> 沒有掛載到頁面上。我們在控制臺將 show 的值更改為 true 晦鞋，觀察一下效果：
Hello World 顯示了出來蹲缠，div 標(biāo)簽也添加了到 thml 里。當(dāng) v-if 為 true 時元素就會添加進(jìn)去悠垛，為 false 時就會刪除线定。
還有一個跟 v-if 效果很類似的指令 v-show ，它兩都可以讓元素顯示隱藏确买，不過也是有點不一樣的斤讥，添加一下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 中的條件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="show"> v-if ：{{ message }}</div>
<!-- 添加的代碼 -->
<div v-show="show">v-show ：{{ message }}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
show: false,
message: "Hello World"
}
})
</script>
</body>
</html>
加多了一個 <div v-show="show">{{ message }}</div> ，v-show 用的變量也是 show 湾趾，打開瀏覽器芭商，會看到如圖：
因為一開始它兩的 show 都為 false ，所以都沒有顯示出來搀缠，但是 v-show 的 div 標(biāo)簽已經(jīng)掛載到了 html 文件里铛楣。
在 Console 修改一下 show 的值改為 true:
兩個 div 標(biāo)簽里的內(nèi)容都顯示了出來, v-if 的 div 標(biāo)簽也能在 html 文件上看得到:
進(jìn)行對比，v-if 和 v-show 都可以控制一個模板標(biāo)簽是否在頁面上顯示艺普。當(dāng) v-if 指令只要對應(yīng)的變量值為 false 簸州，它所對應(yīng)的標(biāo)簽不存在于 DOM 頁面之上，就是還沒有創(chuàng)建出來歧譬。只有當(dāng)它為 true 顯示出來時岸浑，才會把它創(chuàng)建出來。而 v-show 的 div 元素早已創(chuàng)建好在 DOM 頁面之上瑰步，只是加了個 display: none 屬性助琐，讓它隱藏了起來，為 true 也只是把 display: none 給去掉了而已面氓。
在需要頻繁切換隱藏顯示的時候兵钮， v-show 的性能會比 v-if 好很多蛆橡。因為 v-if 每次都要對整個標(biāo)簽進(jìn)行添加和刪除。
v-if 有一個跟它配對的指令掘譬，v-else泰演，修改一下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 中的條件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-else 必須跟 v-if 相鄰 -->
<div v-if="show">{{ message }}</div>
<div v-else>Bye World</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
show: false,
message: "Hello World"
}
})
</script>
</body>
</html>
打開瀏覽器，會發(fā)現(xiàn)顯示在頁面上的是 Bye World：
當(dāng)我們把 show 給成 true 的時候葱轩，Hello World 就出來了:
這就是 v-if 和 v-else 的簡單組合使用睦焕，記住，它們兩個必須相鄰寫在一起Ｑス啊＠啊！
還有這么一個組合 v-if 袜炕、v-else-if 本谜、v-else 三個的組合， v-else-if 可以在中間添加多個進(jìn)行判斷偎窘，修改代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 中的條件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-else 必須跟 v-if 相鄰 -->
<div v-if="show === 'a'">This is A</div>
<div v-else-if="show === 'b'">This is B</div>
<div v-else>This is others</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
show: "a"
}
})
</script>
</body>
</html>
把 message 這個數(shù)據(jù)刪除了乌助，show 改成了一個字符串 a 。打開瀏覽器會看到 This is A陌知，因為 show 的默認(rèn)值是 a 他托，我們在 Console 調(diào)試窗口分別修改成 b 和 a 、b 以外的值看看效果：
對應(yīng)的判斷條件會輸出對應(yīng)的 div 標(biāo)簽仆葡，顯示不同的結(jié)果赏参，這就是 v-if 、v-else-if 沿盅、v-else 的使用方法把篓。
講一種比較特殊的情況，修改一下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 中的條件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="show">
用戶名：<input />
</div>
<div v-else>
密 碼：<input />
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</body>
</html>
打開瀏覽器嗡呼，操作一下:
會發(fā)現(xiàn)纸俭，當(dāng)我們進(jìn)行切換的時候皇耗，輸入框里的內(nèi)容并沒有清除南窗，這是為什么呢？
因為 v-if 郎楼、v-else 万伤、v-else-if 這三個指令有一個盡量復(fù)用已有的標(biāo)簽，來增加渲染的速度呜袁，也就是說有共同標(biāo)簽的情況下敌买，不會進(jìn)行修改，只修改發(fā)生變化的部分阶界，那應(yīng)該怎樣解決這個問題呢虹钮？
我們采用一個 key 值的辦法聋庵。給兩個 <input /> 標(biāo)簽加上 key 。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 中的條件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="show">
用戶名：<input key="username"/>
</div>
<div v-else>
密 碼：<input key="password"/>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</body>
</html>
再試一下上面的操作芙粱，看看結(jié)果如何：
這樣祭玉，剛剛出現(xiàn)的 bug 就沒用了。當(dāng)我們給元素加上 key 值之后春畔，Vue 會知道這是唯一的一個元素脱货，如果兩個的 key 值不一樣，就不會復(fù)用了律姨。
公眾號更精彩哦~
