v-if和v-show的用法

2019/09/05 09:28
阅读数 82

相同点

  v-if 和 v-show 都可以动态控制 dom 元素显示隐藏;

不同点

  v-if 显示隐藏是将 dom 元素整个添加或删除(频繁操作dom对性能影响很大);

  v-show 隐藏是为该元素添加 display:none,dom 元素还存在;

性能消耗

  v-if 有更高的切换消耗;

  v-show 有更高的初始渲染消耗;

使用场景

  当组件中某块内容只会显示或隐藏不会再次改变显示状态,此时用 v-if 更加合适,例如请求后台接口通过后台数据控制某块内容是否显示或隐藏,且这个数据在当前页不会被修改;

  当组件某块内容显示隐藏是可变化的,此时用 v-show 更加合理,例如页面中有一个按钮,点击按钮来控制某块区域的显示隐藏;

编译条件

  v-if 是惰性的,如果初始条件为假,则什么也不做,只有在条件第一次变为真时才开始局部编译(编译被缓存后,然后再切换的时候局部卸载);

  v-show 是在任何条件下都被编译,然后被缓存,而且 dom 元素保留;

注意

  当一个元素默认在css中加了 display:none属性,这时通过 v-if 或者 v-show 修改为 true 是无法让元素显示的。因为动态控制显示隐藏,只是修改 display:none 或者display:" ",并不会覆盖或者修改已经存在的css属性~

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部