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 @ 2022-05-12 16:42  蘑菇萌萌哒  阅读(260)  评论(0)    收藏  举报