• vue中v-if和v-show的区别


    v-if、v-show顾名思义就是用来判断视图层展示效果的。 

    v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。

    v-show 指的是单纯的切换元素的样式dispaly样式

      

      v-if vs v-show

    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,当条件为假的时候则不不显示页面元素

    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    (1)、v-if和v-show用于视图层进行条件判断视图展示

    (2)、v-if的原理是根据判断条件来动态的进行增删DOM元素,v-show是根据判断条件来动态的进行显示和隐藏元素,频繁的进行增删DOM操作会影响页面加载速度和性能,由此我们可以得出结论:

      当您的项目程序不是很大的时候,v-if和v-show都可以用来进行判断展示和隐藏(这种场景使用v-if只是影响不大,并不是没有影响);

      当您的项目程序比较大的时候,不推荐使用v-if来进行判断展示和隐藏,推荐使用v-show;

    (3)、只有v-if能和v-else连用进行分支判断,v-show是不能和v-else连用的,如果出现多种条件场景的情况下,可以使用v-if来进行判断

     两者的使用场景:

        如果需要非常频繁地切换,则使用 v-show 较好,如果在运行时条件很少改变,则使用 v-if 较好。

  • 相关阅读:
    【BZOJ2844】albus就是要第一个出场 高斯消元求线性基
    Python入门之面向对象module,library,package之间区别
    Python入门之字典的操作详解
    Python Web学习笔记之TCP/IP协议原理与介绍
    Python Web笔记之高性能网络编程
    Python Web学习笔记之面试TCP的15个问题
    Python Web学习笔记之TCP/IP、Http、Socket的区别
    Python Web学习笔记之TCP、UDP、ICMP、IGMP的解释和区别
    Python Web学习笔记之IGMP和ICMP的差别
    Python设计模式之单例模式
  • 原文地址:https://www.cnblogs.com/dcyd/p/12482276.html
Copyright © 2020-2023  润新知