vue動(dòng)態(tài)顯示DOM元素常用 v-if 和 v-show 這兩種方式，但這兩種是有區(qū)別的：
- v-if：當(dāng)條件為false時(shí)凛俱，包含v-if指令的元素，根本就不會(huì)存在與dom中
- v-show：當(dāng)條件為false時(shí)料饥，v-show只是給元素添加一個(gè)行內(nèi)樣 display:none
| 區(qū)別 | v-if | v-show |
|---|---|---|
| 實(shí)現(xiàn)方式 | 動(dòng)態(tài)地向DOM樹內(nèi)添加或者刪除DOM元素 |
設(shè)置DOM元素的display樣式屬性來控制顯隱(display="none") |
| 編譯過程 | 切換有一個(gè)局部編譯/卸載的過程(切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件) | 控制css進(jìn)行切換 |
| 編譯條件 | 初始值為false就不編譯蒲犬；只有在第一次條件變?yōu)檎鏁r(shí)才開始局部編譯 | 在任何條件下（首次條件是否為真）都被編譯 |
| 性能消耗 | 不停的銷毀和創(chuàng)建（v-if 的初始化較快，但切換代價(jià)高） | 只編譯一次岸啡，保留DOM元素原叮，之后通過控制css來控制顯隱 （v-show 初始化慢，但切換成本低巡蘸，性能更好） |
| 使用場景 | 適合僅切換一次或不頻繁切換的場景（應(yīng)用更廣） |
適合頻繁切換的場景（不常用） |
eg1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- 當(dāng)條件為false時(shí)奋隶，包含v-if指令的元素，根本就不會(huì)存在與dom中 -->
<h2 v-if="isShow" id="aaa">{{message}}</h2>
<!-- 當(dāng)條件為false時(shí)悦荒，v-show只是給元素添加一個(gè)行內(nèi)樣式 display:none -->
<h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message :'liy',
isShow :true
}
});
</script>
</html>
eg2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<div>
<span>v-if和v-show都能實(shí)現(xiàn)元素的隱藏和顯示唯欣，但v-if是將元素添加到dom或從dom移除，而v-show是通過為元素添加或移除{display:none}屬性來實(shí)現(xiàn)隱藏和顯示</span>
</div>
<button v-on:click="showOrHidden">顯示隱藏切換</button>
<div v-if="isShow">我有一頭小毛驢</div>
<div v-show="isShow">我又有一頭小毛驢</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
showOrHidden:function(){
this.isShow = !this.isShow;
}
}
});
</script>
</html>
拓展：display:none 和 visible:hidden 都能把網(wǎng)頁上某個(gè)元素隱藏起來搬味。兩者區(qū)別為:
- display:none ---使該對象在頁面上徹底消失境氢，通俗來說就是看不見也摸不到。
- visible:hidden--- 使對象在網(wǎng)頁上不可見碰纬，即在網(wǎng)頁中不占任何的位置萍聊。
