v-if与v-show的区别

v-if与v-show的区别相同点:v-if与v-show都可以动态控制dom元素显示隐藏不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css–display:none,dom元素还在。都修改为false后,第一个div是直接被移除掉了需要注意的是,当一个元素默认在css中加了display:none属性,这时通过if-show修改为true是无法让元素显示的。…

大家好,又见面了,我是你们的朋友全栈君。

相同点:v-if与v-show都可以动态控制dom元素显示隐藏

不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css–display:none,dom元素还在。

v-if与v-show的区别

都修改为false后,第一个div是直接被移除掉了

v-if与v-show的区别

需要注意的是,当一个元素默认在css中加了display:none属性,这时通过if-show修改为true是无法让元素显示的。原因是显示隐藏切换,只是会修改element style为display:””或者display:none,并不会覆盖掉或修改已存在的css属性。

v-if与v-show的区别

 

更详细的区别这里直接引用Young Dreamer的博客内容

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适合频繁切换。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/147179.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Windows server WSUS补丁服务器搭建

    写在前面关于微软Windows操作系统补丁更新,针对于客户生产环境补丁更新,为了安全起见不得不建议搭建相应的补丁服务器,利用自动或者手动更新指定服务器的最新补丁。借用闲暇时间做相应的总结,方便后期工作中参考。搭建条件首先安装相应的.NET环境,IIS环境, 存放补丁包,需要充裕的磁盘空间。搭建过程首先下载Wsus3.0的安装文件,这里给出简体中文版的下载地址,…

    2022年4月1日
    58
  • GET和POST两种基本请求方法的区别「建议收藏」

    GET和POST两种基本请求方法的区别「建议收藏」GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题,你的内心充满了自信和喜悦。 你轻轻松松的给出…

    2022年6月13日
    39
  • 软件测试的基本理论知识_软件测试基础知识整理

    软件测试的基本理论知识_软件测试基础知识整理01软件研发流程1.软件产品软件产品是指向用户提供的计算机软件、信息系统或设备中嵌入的软件或在提供计算机信息系统集成、应用服务等技术服务时提供的计算机软件。2.软件工程软件工程,英文名SoftwareEngineering,是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。“软件工程是开发、运行、维护和修复软件的系统方法。”这个定义相当概括,它主要强调软件工程是系统方法而不是某种…

    2025年7月30日
    4
  • DirectSound的应用

    DirectSound的应用

    2021年12月1日
    44
  • Vue 分页器组件[通俗易懂]

    Vue 分页器组件[通俗易懂]<template><divclass=”pagination”><button>上一页</button><button@click=”changecurentpage(1)”v-if=”startEnd.start>1″>1</button><buttonv-if=”startEnd.start>2″>···</button><.

    2022年9月30日
    4
  • 干货 | 一文概览主要语义分割网络,FCN、UNet、SegNet、DeepLab 等等等等应有尽有[通俗易懂]

    干货 | 一文概览主要语义分割网络,FCN、UNet、SegNet、DeepLab 等等等等应有尽有[通俗易懂]原文地址:https://meetshah1995.github.io/semantic-segmentation/deep-learning/pytorch/visdom/2017/06/01/semantic-segmentation-over-the-years.html介绍图像的语义分割是将输入图像中的每个像素分配一个语义类别,以得到像素化的密集分类。虽然自2007年以来,…

    2022年8月21日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号