zoukankan      html  css  js  c++  java
  • v-if和v-show的区别与使用

    1.共同点:

    v-if 和 v-show 都能实现元素的显示隐藏.

    2.不同点:

    v-if显示隐藏是将dom元素整个添加或删除,v-show元素隐藏时,会在dom节点中把该元素设置css属性为display : none,元素依然保留在dom节点中.

    3.区别

    (1).手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;

    (2).编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;

    (3).编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;

            只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);

            v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

    (4).性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;

    (5).使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。

     

    4.什么时候使用v-if,什么时候使用v-show?

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

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

    原因:

    频繁操作dom对性能影响很大,v-if如果用在有toggle按钮控制的情况下,相当于在频繁增加dom和删除dom,

    所以此时用v-show更加合适,如果只是要么显示要么隐藏之后不会再改变显示隐藏状态的情况,v-if更加的合理,

    因为如果默认就是隐藏,相当于dom一次都不用创建,如果默认是显示,v-if和v-show效果完全一样。

     

     

  • 相关阅读:
    codevs 3115 高精度练习之减法 swap
    codevs 3116 高精度练习之加法
    poj 3984 迷宫问题
    codevs m进制转化成10进制
    codevs 1214 线段覆盖
    codevs 3143 二叉树的序遍历
    codevs 3145 汉诺塔
    HDU 5093 Battle ships [二分图匹配]
    HDU 5074 Hatsune Miku [dp] ——2014鞍山现场赛E题
    ZOJ 3793 First Digit (逗比题)
  • 原文地址:https://www.cnblogs.com/angel648/p/13706394.html
Copyright © 2011-2022 走看看