Vue中的v-if與v-show
阿新 • • 發佈：2017-12-13
刪除 -i gpo none 過程 data 屬性 一次 重建
一、共同點
根據數據值來判斷是否顯示DOM元素
二、區別
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if與v-show</title>
<script src="src/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if=‘val‘>v-if</p>
<p v-show=‘val‘>v-show</p>
</div>
</body>
<script>
var vm=new Vue({
el:‘#app‘,
data:{
val:false
}
});
</script>
</html>
瀏覽器解析結果：
<div id="app"> <!----> <p style="display: none;">v-show</p> </div>
1.手段：v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是通過設置DOM元素的display樣式屬性控制顯隱；
2.編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件；v-show只是簡單的基於css切換；
3.編譯條件：v-if是惰性的，如果初始條件為假，則什麽也不做；只有在條件第一次變為真時才開始局部編譯（編譯被緩存？編譯被緩存後，然後再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然後被緩存，而且DOM元素保留；
4.性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
5.使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換。
三、註意點
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="src/js/vue.min.js"></script>
<style>
p{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-show=‘val‘>v-show</p>
</div>
</body>
<script>
var vm=new Vue({
el:‘#app‘,
data:{
val:true
}
});
</script>
</html> 盡管val的值為true,但頁面中仍然不顯示p。如果v-show作用的元素，css文件中（或者在頁面style裏）display:none，通過v-show進行設置不能顯示該元素。
原因：v-show控制顯隱，是通過js代碼去修改元素的element style，如果value為false，設置display: none;如果value為true，設置display: ‘‘；於是value為true時，只能將element style中的display效果清除，並不能覆蓋css中的display效果；
解決辦法：使用v-show的話，在vue解析之前隱藏DOM的話，盡量在style屬性裏面設置display的值，不要在css文件中。
Vue中的v-if與v-show