Vue提供了v-if汉操，v-else再来，v-show這幾個指令來判斷是否該輸出指定的DOM元素。
本節(jié)目錄
- v-if 的用法
- v-if 和 v-else 的配合
- v-show 的用法
- v-if 和 v-show 的區(qū)別（包括緩存部分）
v-if
v-if 指令可以完全根據(jù)表達式的值在DOM中生成或移除一個元素磷瘤。
如果 v-if 表達式賦值為 false芒篷，那么對應的元素就會從DOM中 移除；
否則對應的元素將會被插入DOM中采缚。
用法如下
<!--HTML 代碼-->
<div id="app">
<div v-if="yes">Yes</div>
</div>
/*JS代碼*/
new Vue({
el: '#app',
data: {
yes: true
}
)}
當前 yes 為 true针炉，所以 div 是顯示的。如果為 false 就不顯示了扳抽。
v-else
v-else 是要跟著 v-if 一起使用的篡帕。
else 也就字面意思殖侵。跟上面的 if 取反而已。
用法如下：
<!--HTML 代碼-->
<div id="app">
<div v-if="yes">Yes</div>
<div v-else>No</div>
</div>
/*JS代碼*/
new Vue({
el: '#app',
data: {
yes: false
}
)}
因為 yes 的值為 false镰烧，所以內(nèi)容為 “No” 的div會顯示拢军，內(nèi)容為 “Yes” 的div將會被移除。
注意拌滋，v-else 前一個元素朴沿，一定是設置了 v-if 的元素。
下面是錯誤寫法：
<!--HTML 代碼-->
<div id="app">
<span v-if="yes">Yes</span>
<br />
<span v-else>No</span>
</div>
/*JS代碼*/
new Vue({
el: '#app',
data: {
yes: false
}
)}
因為內(nèi)容為 “No” 的 span 前面跟著的是
標簽败砂，這個標簽沒設置 v-if 赌渣，所以會報錯。
v-show
v-show 的用法和 v-if 是差不多的昌犹。
<!--HTML 代碼-->
<div id="app">
<div v-show="yes">Yes</div>
</div>
/*JS代碼*/
new Vue({
el: '#app',
data: {
yes: true
}
)}
但 v-else 是不能和 v-show 配合使用坚芜。如果需要做到 v-if 和 v-else 那樣配合，可以用以下寫法斜姥。
<!--HTML 代碼-->
<div id="app">
<div v-show="yes">Yes</div>
<!--下面的div進行取反-->
<div v-show="!yes">No</div>
</div>
/*JS代碼*/
new Vue({
el: '#app',
data: {
yes: true
}
)}
v-if 和 v-show 的區(qū)別
【區(qū)別 1】展示方式不同鸿竖。
v-if 是插入或移除元素，在html模板里是插入铸敏，或者不存在缚忧。
<!--HTML 代碼-->
<div id="app">
<div v-show="yes">Yes</div>
</div>
/*JS代碼*/
new Vue({
el: '#app',
data: {
yes: false
}
)}
渲染出來后，完全看不到內(nèi)容為 “Yes” 的 div 的蹤影杈笔，只留下一個注釋標簽闪水。
而用 v-show 的話是下圖所示。
我們還能找到內(nèi)容為 “Yes” 的 div蒙具，只是這個 div 設置了 display: none;
由此可看出球榆，v-show 為 false 時，只是用 css 把指定元素隱藏而已禁筏。
【區(qū)別 2】<template>元素
<template>元素能幫我們把一組內(nèi)容放到 <template> 這個根標簽里持钉。但瀏覽器不會渲染這個標簽。
v-if 是可以和 <template> 標簽配合使用的篱昔。但 v-show 不行每强。因為上面說了，瀏覽器不會渲染這個標簽旱爆。所以根本不可能在這個標簽上設置什么CSS樣式舀射。
【區(qū)別 3】緩存問題
v-if 是有緩存的。
v-show 沒有緩存怀伦。
下面的例子是用 v-if
<!--HTML代碼-->
<div id="app">
<input type="text" v-if="write" class="inp1">
<input type="text" v-else class="inp2">
<button @click="write = !write">Change Input</button></div>
/*CSS代碼*/
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
color: #fff;
}
.inp1 {
border: 5px solid lightgreen;
}
.inp2 {
border: 5px solid hotpink;
}
/*JS代碼*/
new Vue({
el: "#app",
data: {
write: false
}
})
按了切換的按鈕，input 的內(nèi)容還是存在的山林。
如果用 v-show 的話房待，一切換內(nèi)容就跟著切換了邢羔。
v-show 的寫法可以自己試，這里提供我的代碼連接
線上代碼（可能要翻墻才能用）
