11v-if v-show
作者:互联网
v-if v-show
v-if
和v-show
用于控制Dom
元素的显示与否,以一段代码为例:
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">v-if</h3>
<h3 v-if="flag">v-show</h3>
</div>
<script>
// vue对象
var vm = new Vue({
el: "#app",
data: {
flag: true
},
methods: {
}
})
</script>
此时点击button
,两个h3
便在显示与不显示的状态之间进行切换了。
但两者的原理有所不同,下面使用Chrome
控制台进行讲述。
这是显示状态下:
这是非显示状态下:
于是我们就清楚了两者的不同:
v-if
控制下的Dom
元素的显示与否是靠创建/删除元素进行的v-show
控制下的Dom
元素的显示与否是靠display:none
属性的生成进行的- 由于
v-if
每次都要重新创建/删除元素,所以切换性能消耗大,在flag
为false
的情况下,v-show
会有较高的初始渲染消耗 - 如果元素涉及到频繁的切换,最好不使用
v-if
,如果元素永远不被显示,最好不使用v-show
以上。
甜木木夕 发布了52 篇原创文章 · 获赞 10 · 访问量 5120 私信 关注标签:显示,Dom,元素,与否,flag,11v,show 来源: https://blog.csdn.net/qq_40996400/article/details/104195979