vue2:v-if和v-show的区别以及造成的影响

news/2025/10/22 20:09:12/文章来源:https://www.cnblogs.com/futagirlkarma/p/19158863
          <div class="form-box-4" v-show="checkedList.includes('0505')"><span class="form-box-4-label"><span style="color: red">*</span>三失一偏类型:</span><ta-form-itemfield-decorator-id="threelostoneType":span="24":field-decorator-options="{rules: [{ required: true, message: '请选择三失一偏类型' }],}":disabled="isTypeDisabled"><ta-checkbox-groupcollection-type="ZAFK_THREELOSTONE_TYPE":value="threelostoneTypeList":disabled="isTypeDisabled"/></ta-form-item></div>

看上面这一段代码,一个复选框,用div包裹,添加了一个v-if条件。就因为这个v-if,导致了接口返回的数据不能回显。
v-if和v-show都能控制元素是否显示,然而原理却完全不同。
v-if:如果为false就销毁元素,原来的那个dom对象就不存在了;如果为true,就创建一个新的dom对象。这导致了我在initForm中回显了数据,但是因为元素经历了一个销毁又被创建的过程,导致会显得数据消失了。
v-show:并不会创建或者销毁元素,而只是在页面上隐藏,无法看到,dom对象还是在的。但是也无法触发生命周期和钩子,因为对象一直都在。

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

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

相关文章

P6845 题解

P6845 他是一个带修改的直径,直径就是两点间最长距离,很容易想到用差分,\(dis_x\) 表示 \(x\) 到根节点的距离 \(dis_x + dis_y - 2dis_{lca(x,y)}\) 去求,先抛开这个 \(lca\) , 修改一条边相当于修改这个边所对应…

office2024绿色精简版

一、简介 首先需要说明的是,目前的安装方法只适合Windows10、11,并且只支持64位的操作系统,这点需要大家注意。大家下载压缩包解压后,在文件夹中会得到三个运行程序,分别是dll修复程序、和office残余文件彻底清理…

51单片机实践之数码管电子时钟/时间呈现及其设置

51单片机实践之数码管电子时钟/时间呈现及其设置pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", …

LGP3694 邦邦的大合唱站队 学习笔记

LGP3694 邦邦的大合唱站队 学习笔记 \(\texttt{Luogu Link}\) 前言 状压热身题。\(\texttt{Warm up!}\) 另外,你知道吗,设定上,邦邦已经火了…… 题意简述 \(n\) 个偶像排成一列,他们来自 \(m\) 个不同的乐队。每个…

2025.10.22学习记录

2025.10.22课程总结 本次学习聚焦 设计规范、查询技术、高级功能 三大模块,目标是掌握从表结构设计到复杂数据查询的全流程能力,为后续数据分析、系统开发奠定基础。 范式理论 核心观点:范式是电商数据结构化的基础…

LeeCode_101对称二叉树

给你一个二叉树的根节点 root , 检查它是否轴对称。 示例 1:输入:root = [1,2,2,3,4,4,3] 输出:true class Solution { public:bool isSameTree(TreeNode* p, TreeNode* q){if(p == nullptr || q == nullptr){retu…

TRAE 设计团队如何玩转 Vibe Coding(上)|高美感页面生成篇

资料来源:火山引擎-开发者社区本内容分为上下两篇,主要和大家分享 TRAE 设计团队基于 TRAE 工具的 Vibe Coding 探索实践,包括三类场景的搭建和价值收益的案例,帮助设计师探索如何通过 Vibe Coding 放大设计价值 /…

详细介绍:观察者模式(Observer Pattern)定义了对象之间的一对多依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都会得到通知并自动更新。

详细介绍:观察者模式(Observer Pattern)定义了对象之间的一对多依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都会得到通知并自动更新。2025-10-22 19:58 tlnshuju 阅读(0) 评论(0) 收藏 举报pre …

LeeCode_226反转二叉树

给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1:输入:root = [4,2,7,1,3,6,9] 输出:[4,7,2,9,6,3,1] //法一: class Solution { public:TreeNode* invertTree(TreeNode* root){if(root =…

TRAE 设计团队如何玩转 Vibe Coding(下)|设计工具生成与提效篇

资料来源:火山引擎-开发者社区本内容分为上下两篇,主要和大家分享 TRAE 设计团队基于 TRAE 工具的 Vibe Coding 探索实践,包括三类场景的搭建和价值收益的案例,帮助设计师探索如何通过 Vibe Coding 放大设计价值 /…

衡量效率,质量,运维的效率指标

目录背景和价值一、效率类指标(一)开发效率(二)运维效率二、质量类指标(一)代码质量(二)产品质量(三)测试质量(四)运维质量参考资料 背景和价值 在IT团队中,衡量效率和质量的指标可从多个维度进行定义,以…

2025多校冲刺CSP模拟赛7 总结

比赛:2025多校冲刺CSP模拟赛7 日期:\(25.10.22\),场地:\(\text{accoder}\),排名:\(56/73\)! 估分:\(30+0+[80,100]+0=110\) 终分:\(30+0+80+0=110\) 应该得分:\(100+100+[80,100]+?=280\) 失分 比赛决策问题…

详细介绍:wpf之 Popup

详细介绍:wpf之 Popuppre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", &quo…

? #4

100 + 60 + 50 + 100 = 310, Rank 1/6.怎么 swap(min(B,C),D) /wx2024暑期CSP-S&NOIP模拟赛第2套 链接:link 题解:link 的题解区 时间:4h (2025.10.22 14:00~18:00) 题目数:4 难度:A B C D\(\color{#F39C11} …

结对项目-生成四则运算

这个作业属于哪个课程 https://edu.cnblogs.com/campus/gdgy/Class34Grade23ComputerScience/这个作业要求在哪里 https://edu.cnblogs.com/campus/gdgy/Class34Grade23ComputerScience/homework/13479姓名 学号 GitHu…

CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)

🧑‍💻 写在开头 点赞 + 收藏 === 学会🤣🤣🤣 CSS3 pointer-events 属性:实现可穿透图层的鼠标事件 在网页开发中,我们通常会遇到多个元素重叠的情况。在这种情况下,如何使得被遮挡的元素仍然能够响应鼠标…

C++开源库使用:nlohmann/json - 指南

C++开源库使用:nlohmann/json - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Mona…

实用指南:JAVA学习-预科部分(路线、博客、预备基础)

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

【比赛记录】2025CSP+NOIP 冲刺模拟赛合集Ⅱ

2025CSP-S模拟赛65(HZOJ CSP-S模拟37)A B C D Sum Rank100 40 15 - 155 7/12HZOJ 上也有这场比赛,但我没看见。放过去大概是个 14/24 左右吧。 A. gcd&xor (gcdxor) 首先打表,发现对于所有合法的 \((x,y)\),都…