v-show只是在修改元素的css样式,也就是display的属性值,元素始终在Dom树上,有更高的初始渲染消耗,适合做频繁的额切换;
v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点,有更高的切换消耗,不适合做频繁的切换;
<style>
.isShowStyle{
display: block;
}
.isIfStyle{
display: block;
}
.isIfBtnStyle{
display: block;
}
</style>
<div id="simple">
<button @click="handleVShow">v-show</button>
<span v-show="isShow" class="isShowStyle">show by v-show</span>
<button @click="handleVIf" class="isIfBtnStyle">v-if</button>
<span v-if="isIf" class="isIfStyle">show by v-if</span>
</div>
var vm = new Vue({
el:"#simple",
data:{
isShow: false,
isIf : false
},
methods:{
handleVShow : function () {
this.isShow = !this.isShow;
},
handleVIf : function () {
this.isIf = !this.isIf;
}
}
});
从DevTool中可以清楚的看到:v-show只是在修改元素的css样式,也就是display的属性值,元素始终在Dom树上
v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点