vue中v-show和v-if指令的共同点和不同点

1、相同点:

v-show 和v-if 都能控制元素的显示和隐藏。

2、不同点:

2.1) 实现本质方法不同 v-show本质就是通过设置css中的display设置为none, 控制隐藏 v-if 是动态的向DOM树内添加或者删除DOM元素

2.2) 编译的区别 v-show 其实就是在控制css v-if 切换有一个局部编译/卸载的过程, 切换过程中合适地销毁和重建内部的事件 监听和子组件

2.3) 编译的条件 v-show都会编译, 初始值为false, 只是将display设为none, 但它也编译了 v-if 初始值为false, 就不会编译了

2.4) 性能比较 v-show只编译一次,后面其实就是控制css, 而v-if不停的销毁和创建, 故v show性能更好一。

3、注意点:

因为v-show实际是操作display:""或者none, 当css本身有display:none时, v show无法让显示

4、总结 (适用场景) :

如果要频繁切换某节点时,使用v-show (无论true或者false初始都会进行渲染, 此 后通过css来控制显示隐藏, 因此切换开销比较小, 初始开销较大),如果不需要频繁切换某 节点时,使用v-if (因为懒加载, 初始为false时,不会渲染, 但是因为它是通过添加和删除 dom元素来控制显示和隐藏的, 因此初始渲染开销较小, 切换开销比较大)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/51939.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3 + element plus使用iconfont 自定义font组件颜色大小可修改

vue3 element plus使用iconfont 自定义font组件&颜色大小可修改这里写自定义目录标题 自定义SvgIcon.vue引入iconfontApp.vue中引入组件更改图标大小 参考网上方案新建SvgIcon.vue,但没说明怎么修改颜色及大小,我在这个博客中简单提供下。 自定义Sv…

通用大模型演进路线

随着人工智能技术的飞速发展,通用大模型(GLMs)已经成为人工智能领域的重要研 究方向。通用大模型拥有超大规模参数,通过大规模数据进行训练,具备强大的学习和推理 能力。这些模型在自然语言处理、图像识别、代码生成等…

skynet 实操篇

文章目录 概述demo启动文件skynet_start配置文件main.luastart函数thread_workerskynet_context_message_dispatchskynet_mq_popdispatch_message 小结 概述 上一篇写完skynet入门篇,这一篇写点实操性质的。 demo 对于一个开源框架,大部分都有他们自己…

史上最全的Seata教学并且连接springcloudAlibaba进行使用

来都来了点个赞收藏一下在走呗~~🌹🌹玫瑰 一、Seata是什么 Seata(Simple Extensible Autonomous Transaction Architecture,简单可扩展自治事务框架)是一种分布式事务解决方案,旨在解决分布式系统中的事务…

UPLOAD-LABS靶场[超详细通关教程,通关攻略]

---------------------------------------- 靶场环境: 下载链接: https://codeload.github.com/c0ny1/upload-labs/zip/refs/heads/master 使用小皮集成环境来完成这个靶场 将文件放到WWW目录下就可以进行访问 ------------------------------------…

利用Docker搭建基于Python的Selenium自动化测试环境

在现代软件开发过程中,自动化测试已成为确保软件质量的关键环节。Python与Selenium是常用的自动化测试组合,而利用Docker搭建自动化测试环境,可以提供一致的测试环境、方便的依赖管理和高效的资源使用。本文将详细介绍如何使用Docker搭建基于Python和Selenium的自动化测试环…

Linux服务器单个大文件上传内存限制修改

/etc/apache2/apache2.conf 添加: <Directory /var/www/html> LimitRequestBody 0 </Directory> /etc/php/7.4/apache2/php.ini 修改: upload_max_filesize 1000G post_max_size 1000G max_execution_time 0 max_input_time 0 memory_limit -1 验证修…

Java从入门到精通(十四) ~ 多线程

晚上好&#xff0c;愿这深深的夜色给你带来安宁&#xff0c;让温馨的夜晚抚平你一天的疲惫&#xff0c;美好的梦想在这个寂静的夜晚悄悄成长。 目录 前言 一、多线程是什么&#xff1f; Java中的多线程 二、使用步骤 1.创建方式 1.1 Thread 线程 1.2 Runnable 任务 1.…

iOS ------ KVO KVC

一&#xff0c; KVO KVO介绍 KVO全称KeyValueObserving,俗称键值监听&#xff0c;是苹果提供的一套时事件通知机制。允许对象监听另一个对象特定属性的改变&#xff0c;并在改变时接受事件。一般继承自NSObject的对象都默认支持KVOKVO和NSNotificationCenter都是iOS观察者模式…

MySQL基础练习题11-换座位

题目&#xff1a;交换每两个连续的学生的座位号。如果学生的数量是奇数&#xff0c;则最后一个学生的id不交换。按 id 升序 返回结果表。 准备数据 分析数据 方法一&#xff1a;利用power函数对id进行交换&#xff0c;得出的答案只有0或1 第一步&#xff1a;用power()函数将…

公司常用的监控软件有哪些?2024年六大公司监控软件良心推荐!

在现代企业管理中&#xff0c;监控软件不仅可以帮助提高员工生产力&#xff0c;还可以确保企业数据的安全和保护。小编分享六款公司监控软件&#xff0c;能够满足不同企业的需求&#xff0c;提升管理效率和信息安全。 一、值得推荐的监控软件 1. 固信软件 固信软件https://ww…

【软件测试】--接口测试

1. 接口用例设计 接口测试的测试点 功能测试 单接口功能&#xff1a; 手工测试中的单个业务模块&#xff0c;一般对应一个接口 登陆业务 --> 登陆接口加入购物车业务 --> 加入购物车接口订单业务 --> 订单接口支付业务 --> 支付接口 借助工具、代码。绕开前端界面…

【初阶数据结构题目】1.返回倒数第k个节点

文章目录 题目描述代码 题目描述 返回倒数第k个节点 代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/typedef struct ListNode ListNode; int kthToLast(struct ListNode* head, int k){ListNode* t hea…

域名未备案可以申请SSL证书吗??

域名未备案可以申请SSL证书。SSL证书的申请并不依赖于域名的备案情况&#xff0c;而是在于对域名的掌握权。只要你拥有域名的所有权&#xff0c;即具有对域名管理的权限&#xff0c;就可以在任何时候向认证机构申请SSL证书。 申请SSL证书的流程通常包括以下几个步骤&#xff1a…

做前端4年了,才明白技术的本质不过是工具而已

四年前&#xff0c;我踏上了前端开发的道路&#xff0c;从HTML和CSS到JavaScript&#xff0c;从jQuery到React&#xff0c;每一步都走得踏实而坚定。随着经验的积累&#xff0c;技术的进步&#xff0c;我逐渐认识到&#xff0c;所谓的“技术”&#xff0c;无非是实现目标的一种…

颜色识别基于高斯混合模型(GMM)的查找表分类器(LUT)

文章目录 create_class_gmm 创建高斯混合模型&#xff08;GMM&#xff09;以进行分类任务add_samples_image_class_gmm 提取训练样本&#xff0c;并将其添加到高斯混合模型 (GMM) 的训练数据集中train_class_gmm 训练一个高斯混合模型 (GMM)clear_class_gmm 清除模型create_cla…

Fiddler学习笔记

目录 前言 简介 原理 界面 前言 测试可以使用fiddler工具&#xff0c;通过抓包的方式修改前端参数和模拟后端返回&#xff0c;快速定位缺陷。 简介 Fiddler是HTTP协议调试代理工具&#xff0c;可以记录并检查所有客户端和服务器之间的HTTP和HTTPS请求&#xff0c;允许监视…

题解 - 修改回文(二)(上海月赛2024.7乙组T4)

题目描述 给定一个仅由小写字母组成的字符串 s &#xff0c;你可以添加一些字符&#xff08;也可以不加&#xff09;&#xff0c;使其构成回文串。 请你输出在添加字符数最少的前提下&#xff0c;能够构成字典序最小的回文串。 输入格式 输入共一行&#xff0c;一个字符串 s…

快速幂算法

函数 pow_mod 计算 (x^y \mod \text{mod}) 的值&#xff0c;其中 (x) 是基数&#xff0c;(y) 是指数&#xff0c;(\text{mod}) 是模数。它使用的是“快速幂”算法&#xff0c;这是一种高效计算大整数幂的方法&#xff0c;并在每一步计算中都取模以防止溢出。这个算法的时间复杂…

Python seaborn美化篇-风格style

本文分享Python seaborn中通过风格style美化图形。 风格(style),用于设置the general style of the plots,例如,图中网格线是否开启、颜色、线宽等。 5.2 style设置图形通用样式 5.2.1 axes_style查看style内容 一张图的style包含的内容可通过axes_style()查看, sns…