<DIV id="app">
<input type="button" value="切换" v-on:click="handover">
<p v-if="flag">我用的是v-if</p>
<p v-show="flag">我用的是v-show</p>
</DIV>
<script>
var vm=new Vue({
el:"#app",
data:{
flag:true
},
methods:{
handover(){
this.flag=!this.flag
}
}
})
</script>
下面截图为flag切换为false时显示的DOM元素
v-if
每次切换都会重新删除或创建元素,有较高的切换性能消耗
v-show
每次进行切换,DOM元素都不会删除,只是在切换display的none和block属性值。所以有较高的初始渲染消耗
所以,如果元素涉及到频繁切换就用v-show
如果元素永远不会被显示出来被用户看到,可以使用v-if