关于javascript:vue中vshow指令与vif指令到底有那些区别又如何使用

7次阅读

共计 807 个字符,预计需要花费 3 分钟才能阅读完成。

v-show 指令与 v -if 指令到底有那些区别?
最次要的区别其实在于渲染,用 v -show 无论绑定的值为 true 或者 false 都会渲染 dom。如下图在 guiplan 开发工具中将副标题的显示条件(v-show 指令 ) 设置为 false, 副标题尽管被暗藏了,但 dom 元素仍然存在。只是强制给副标题增加了一个 display:none 款式进行了一个暗藏操作。

而咱们持续用 v -if 指令,能够看出整个的副标题 h3 间接去掉了,也就是基本就不会给你进行渲染。

什么时候用 v -show,什么时候用 v -if 呢?
理解到了他们的区别之后,咱们能力更好的去了解,去应用。首先 v -show 指令会提前渲染 dom, 所以做显示与暗藏切换时缓存的 dom 开箱即用并不会加大性能的损耗,而 v -if 指令如果频繁的切换,会一直的销毁 dom 与从新创立 dom 会造成肯定的性能损耗,特地是要渲染的场景过于简单时。所以 v -show 指令适宜频繁的切换。比方 tab 切换,下拉框显示等。以下是记单词一个我的项目截图,当点击 tab 切换时所有的图片与字母都进行了暗藏,点击查看单词按钮即可显示残缺的图片与单词。这里就比拟适宜 v -show 指令做频繁的切换。

这么看来如同用 v -show 指令就够了?事实并非如此,但什么时候用 v -if 指令呢?其实有很多场景不须要频繁切换的,咱们都能够用 v -if 指令。并且 v -if 还反对多条件判断。咱们来看如下场景,在记单词游戏中能够看到外面有图片,中文,英文单词 三种显示模式,而这三种模式咱们只需显示一种即可,并且并不需要频繁切换,这样咱们就能够应用 v -if 指令。如果类型为图片类型则显示图片,中文类型则显示中文,英文类型则显示英文。如果含有更多的类型,则能够接续用 else if 指令,实现多条件判断。并且显示一种之后其余不满足条件的都不会被渲染,这样极大升高了不必要的渲染过程,进步性能。

原文转载 http://www.guiplan.com/articl…

正文完
 0