Vue中v-if和v-show区别
- v-if:每次都会删除和创建元素,频繁地操作DOM树
- v-show:不进行对DOM树的操作,只切换元素的display:none样式
主要代码演示:
<div id="app">
<input type="button" value="toggle" @click="flag = !flag">
<h3 v-if = "flag">这是v-if控制的区域</h3>
<h3 v-show = "flag">这是v-show控制的区域</h3>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag : true,
},
})
</script>
复制代码
结果如下:(注意观察红框中的内容变化) 未点击 按钮时
点击按钮后
转载于:https://juejin.im/post/5cefa2e1f265da1bcf5dc0df