guiplan低代码开发工具

guiplan是一款可视化低代码开发工具,支持自适应定制,支持传统主流框架如bootstrap,uniapp,element-ui,uView

立刻下载
qq学习群:
搜索微信号guiplan添加好友,即可拉入学习群哟
{"_id":"XE5CVnjVI","userId":"V0wZDCcBC","createTime":"2022-11-16T02:30:16.385Z","updateTime":"2022-11-16T03:06:58.974Z","updateBy":"","title":"vue中v-show指令与v-if指令到底有那些区别?又如何使用?","orderIndex":0,"content":"<figure><figure></figure><p><br/><img src=\"https://www.guiplan.com/upload/website/article/ctTX2nqRcwvd9jjDiwaFih2lcfHm8LxU.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/></p><p><strong>v-show指令与v-if指令到底有那些区别?</strong></p><p>最主要的区别其实在于渲染,用v-show无论绑定的值为true或者false都会渲染dom。如下图在guiplan开发工具中将副标题的显示条件(v-show指令)设置为false,副标题虽然被隐藏了,但dom元素依然存在。只是强制给副标题添加了一个display:none样式进行了一个隐藏操作。<br/></p><figure><p><img src=\"https://www.guiplan.com/upload/website/article/ea51NPuVp5ICvRoBWLqfTrHTBRuzLtWi.png\" style=\"max-width:100%;\" contenteditable=\"false\"/></p><p><br/></p></figure><p>而我们继续用v-if指令,可以看出整个的副标题h3直接去掉了,也就是根本就不会给你进行渲染。<br/></p><figure><p><img src=\"https://www.guiplan.com/upload/website/article/P7JGnj4WV3GxvvUQc3vNIKTgNAnv2wlB.png\" style=\"max-width:100%;\" contenteditable=\"false\"/></p></figure><p><strong>什么时候用v-show,什么时候用v-if呢?</strong></p><p>了解到了他们的区别之后,我们才能更好的去理解,去使用。首先v-show指令会提前渲染dom,所以做显示与隐藏切换时缓存的dom开箱即用并不会加大性能的损耗,而v-if指令如果频繁的切换,会不断的销毁dom与重新创建dom会造成一定的性能损耗,特别是要渲染的场景过于复杂时。所以v-show指令适合频繁的切换。比如tab切换,下拉框显示等。以下是记单词一个项目截图,当点击tab切换时所有的图片与字母都进行了隐藏,点击查看单词按钮即可显示完整的图片与单词。这里就比较适合v-show指令做频繁的切换。<br/></p><figure><p><img src=\"https://www.guiplan.com/upload/website/article/nm6WKvvXovRU1is2B29vxkoC2webUA9k.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/></p></figure><figure><p><img src=\"https://www.guiplan.com/upload/website/article/mHQvRbiNhHCvK2QZgqmdvhu81z9efT8j.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/></p></figure><p>这么看来好像用v-show指令就够了?事实并非如此,但什么时候用v-if指令呢?其实有很多场景不需要频繁切换的,我们都可以用v-if指令。并且v-if还支持多条件判断。我们来看如下场景,在记单词游戏中可以看到里面有图片,中文,英文单词 三种显示模式,而这三种模式我们只需显示一种即可,并且并不需要频繁切换,这样我们就可以使用v-if指令。如果类型为图片类型则显示图片,中文类型则显示中文,英文类型则显示英文。如果含有更多的类型,则可以接续用else if指令,实现多条件判断。并且显示一种之后其他不满足条件的都不会被渲染,这样极大降低了不必要的渲染过程,提高性能。<br/></p><figure><p><img src=\"https://www.guiplan.com/upload/website/article/VVPoHNnBvFrzoiRxnB6UTIM8ddxoETpH.png\" style=\"max-width:100%;\" contenteditable=\"false\"/></p></figure></figure>","img":"https://www.guiplan.com/upload/website/article/BR9M9VjNVMnLV4PbKFAcMMVlalnjdz3T.jpg","imgList":[],"typeId":"-5tVjUb6z","repertoryNum":0,"liks":0,"hits":835,"intro":"","isTop":false,"auth":"","isAdvantage":false,"typeIds":["LCshWORHR"],"__v":0}0000000000LCshWORHR

帮助中心

NEWS CENTER

vue中v-show指令与v-if指令到底有那些区别?又如何使用?

作者: 发布时间:2022-11-16 10:30 835次预览


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指令,实现多条件判断。并且显示一种之后其他不满足条件的都不会被渲染,这样极大降低了不必要的渲染过程,提高性能。

guiplan,让设计更流畅,开发更高效

上海尚进网络科技有限公司
扫码领取会员