码迷,mamicode.com
首页 > 其他好文 > 详细

vue - v-if与v-shou

时间:2020-12-25 12:25:13      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:显示   加载   适用于   渲染   问题   样式   操作   css   卡顿   

大家都知道v-show与v-if都是用来显示隐藏元素,v-if还有一个v-else来配合使用,两者达到的效果都是一样的。

详解v-if - v-shou

  v-if

    条件为false时,无操作什么也不渲染,当条件为true时,开始对对应局部渲染,动态的向DOM元素里面添加元素。当条件从true变为false时,开始局部编译,卸载这些元素,也就是删除。

   v-if要注意的是性能消耗问题,因为v-if的操作涉及到了对dom元素的增删操作,每操作一次就会重新编译渲染

  v-show

    v-show不管条件是true还是false,第一次渲染的时候都会编译出来,也就是标签都会添加到DOM中。之后切换的时候,通过display: none的方式来显示隐藏元素。可以说只是改变css的样式,几乎不会影响什么性能。如果渲染元素特别多并且不频繁使用建议使用v-if.

总结:

   V-Show更适用于那些需要频繁切换显示与否的组件,最明显的例子就是tab切换一类,如果这个场景下使用的是V-If 势必会出现卡顿与加载缓慢的现象,与之相对的,V-If则更适合那些没那么频繁,甚至只会出现一次的的场景,

vue - v-if与v-shou

标签:显示   加载   适用于   渲染   问题   样式   操作   css   卡顿   

原文地址:https://www.cnblogs.com/hqkbk/p/14165862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!