1、v-if和v-show都是用來實現條件判斷的指令。
2、先看代碼
<body>
<div id="app">
<button @click="reverse()">click</button>
<p v-if="flag">這是v-if指令控制</p>
<p v-show="flag">這是v-show指令控制</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{
reverse(){
this.flag = !this.flag;
}
}
});
</script>
</body>
通過點擊按鈕來控制v-if和v-show對應元素的顯示和隱藏。從頁面展示現象看，這兩個指令的作用是一樣的，我們來看下瀏覽器控制台元素的具體展示情況。
當頁面元素隱藏或者顯示的時候，v-if每次都會重新刪除或創建元素，v-show指令則通過控制樣式屬性display的值來實現同樣的效果。
總結：
1、v-if由於每次都會重新刪除或創建元素，所以有較高的切換性能消耗。
2、v-show通過控制樣式屬性display的值來顯示隱藏元素，但是即使你不需要顯示，該元素還是被頁面渲染了，所以其有較高的初始渲染消耗。
3、具體使用哪一個還是要根據實際的業務場景來判斷使用。
每天進步一點點！