v-show 和 v-if 的作用和区别

1:二者作用:都是控制元素的显示与隐藏

2:区别

v-if

动态的向DOM树内添加或者删除DOM元素;是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;在初始渲染条件为假时,什么也不做。

v-show

通过设置DOM元素的display样式属性控制显示和隐藏;不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换

3:应用场景的不同

     v-if 多用于需要判断数据 从而整体删除一个标签时
      (不频繁切换显示状态)
     v-show 多用于通过判断数据来处理标签的显示时
      (频繁切换显示状态)

4:实质

v-if根据条件判断是否创建该标签,显示或隐藏 v-show不管条件如何,该标签都会被创建,只不过通过css的display来切换显示或隐藏

posted @   蘑菇萌萌哒  阅读(249)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示