vue keep-alive标签的运用
keep-alive，想必大家都不会很陌生，在一些选项卡中会使用到。其实，它的作用大概就是把组件的数据给缓存起来。
比如果我有一个选项卡，标签一，标签二，标签三。现在，我需要实现，当我在标签一的表单中输入内容后，点击标签二，再回到标签一，表单的内容依然存在。如果按以往的做法，不使用 keep-alive ，那是不能实现的。
然而，我们只需要在选项卡的内容最外层包一个 keep-alive 标签即可。但这儿有一个需要注意的地方，当我们使用 keep-alive 标签后，keep-alive 的下一级必须得有一个 div，不能有多个。也就是说，它跟我们根节点的 template 很像。必须得有一个跟标签的 div。
<view class="list"><keep-alive><template v-if="types.value == '1'"><!--注意，这儿必须得只有一个根标签的 view--><view><view class="search"><tn-input v-model="type1.search" :border="true" placeholder="请输入关键词进行搜索" /></view><view class="checkbox"><tn-checkbox-group activeColor="#409eff" width="100%" v-model="type1.checkList" wrap style="height: 340px; overflow-y: scroll;"><template v-for="(item, index) in type1.list"><tn-checkbox style="padding: 10rpx 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08);":name="item">{{ item }}</tn-checkbox></template></tn-checkbox-group></view></view></template></keep-alive><keep-alive><template v-if="types.value == '2'"><view><view class="search"><tn-input v-model="type2.search" :border="true" placeholder="请输入关键词进行搜索" /></view><view class="checkbox"><tn-checkbox-group activeColor="#409eff" width="100%" v-model="type2.checkList" wrap style="height: 340px; overflow-y: scroll;"><template v-for="(item, index) in type2.list"><tn-checkbox style="padding: 10rpx 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08);":name="item">{{ item }}</tn-checkbox></template></tn-checkbox-group></view></view></template></keep-alive>
</view>相关文章：
vue keep-alive标签的运用
keep-alive，想必大家都不会很陌生，在一些选项卡中会使用到。其实，它的作用大概就是把组件的数据给缓存起来。 比如果我有一个选项卡，标签一，标签二，标签三。现在，我需要实现，当我在标…...
python编写一段爱心代码
代码编写 1. 导入模块和常量定义 python import random from math import sin, cos, pi, log from tkinter import *CANVAS_WIDTH 640 # 画布的宽 CANVAS_HEIGHT 480 # 画布的高 CANVAS_CENTER_X CANVAS_WIDTH / 2 # 画布中心的X轴坐标 CANVAS_CENTER_Y CANVAS_HEIGH…...
Python流程控制
目录 一，条件判断：if语句 1.基本语法与示例 2.多重条件判断（elif） 3.常见错误与避坑指南 1.缩进错误 2.遗漏冒号 二，循环结构：while与for 1.while循环 2.Python的注释 3.字符串的格式化输出 4.fo…...
机器人雅克比Jacobian矩阵程序
% 定义机器人的连杆参数 L1 Link(d, 0, a, 0, alpha, pi/2); L2 Link(d, 0, a, 1, alpha, 0); L3 Link(d, 0, a, 1, alpha, 0);% 创建机器人对象 robot SerialLink([L1, L2, L3], name, MyRobot);% 设置机器人的关节角度（弧度） q [0, pi/4, pi/6];%…...
Qt Creator中自定义应用程序的可执行文件图标
要在Qt Creator中为你的应用程序设置自定义可执行文件图标，你需要按照以下步骤操作： Windows平台设置方法 准备图标文件： 创建一个.ico格式的图标文件（推荐使用256x256像素，包含多种尺寸） 可以使用在线工…...
应该怎样理解“被劫持“
通常, 在 iOS 开发相关的语境中，「被劫持」的精确定义 一句话：任何「未经应用或服务器授权，第三方改变了客户端—服务器之间解析结果、传输路径或数据内容」的情形，都视为网络被劫持。 具体可拆成 六大类，每类都对应可…...
RocketMQ面试题：进阶部分
🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...
【k8s系列7-更新中】kubeadm搭建Kubernetes高可用集群-三主两从
主机准备 结合前面的章节，这里需要5台机器，可以先创建一台虚拟机作为基础虚拟机。优先把5台机器的公共部分优先在一台机器上配置好 1、配置好静态IP地址 2、主机名宇IP地址解析 [root@localhost ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost…...
12、高阶组件：魔法增幅器——React 19 HOC模式
一、魔法增幅器的本质 "高阶组件是魔法师用咒语叠加的炼金术，"霍格沃茨魔咒研究院院长凝视着发光的增幅器，"通过函数式能量场的嵌套，让基础组件获得预言家日报式的逻辑继承！" ——以神秘事务司的「维度叠加理…...
Linux避免文件误删详解（Linux Avoids File Deletion Errors with Detailed Explanation）
Linux避免文件误删详解 背景 大家都知道，rm指令在Linux中非常牛，rm -rf更是牛中的霸主。什么删系统跑路、删库跑路就是这个指令造成的。可以看出指令虽然牛，但是危险性极高。那么怎么避免某些时候的这种误操作造成的影响呢，阿祥…...
模板方法模式：定义算法骨架的设计模式
模板方法模式：定义算法骨架的设计模式 一、模式核心：模板方法定义算法骨架，具体步骤延迟到子类实现 在软件开发中，经常会遇到这样的情况：某个算法的步骤是固定的，但具体步骤的实现可能因不同情况而有所不…...
QT之Q_PROPERTY介绍以及在QWidget中的用法
目录 一、 Q_PROPERTY介绍 1、 Q_PROPERTY是什么 2、Q_PROPERTY 的语法 3、Q_PROPERTY 的作用 二、在QWidget中的用法 1、示例1：自带属性 2、 示例2：自建属性第一种 3、 示例3：自建属性第二种 4、动态属性 三、注意事项 四、总结 一…...
MySQL 8 自动安装脚本（CentOS-7 系统）
文章目录 一、MySQL 8 自动安装脚本脚本说明📌 使用脚本前提条件1. 操作系统2. 用户权限3. 网络要求 📌 脚本的主要功能1. 环境检查2. MySQL 自动安装3. 自动配置 MySQL4. 防火墙配置5. 验证与输出 📌 适用场景 二、执行sh脚本1. 给予脚本执行…...
软件测试基础知识（2） -- 软件评测师（十三）
3 基于风险的测试 风险是当前未发生而未来有肯会发生并造成一定负面影响的事件。 3.1 基于风险的测试概述 （1）测试计划内容的核心： 1）测什么：从风险出发，需要明确地列举出要测试哪些具体的功能和非功能的质…...
axios 在请求拦截器中设置Content-Type无效问题
Axios 会根据请求数据自动设置 Content-Type： 当请求体为空时，Axios 会移除 Content-Type 头部 当请求体为对象时，默认设置为 application/json 当请求体为 URLSearchParams 时，默认设置为 application/x-www-form-urlencoded …...
MFC案例：使用键盘按键放大、缩小窗口图像的实验
当在对话框窗口居中显示一幅图像时，图像的尺寸可能大于或小于窗口的尺寸，这时我们希望通过使用按键“”进行图像放大显示，使用按键“-”进行缩小显示（当然也可以使用其它按键）。下面开始使用MFC进行这个实验࿰…...
本地（NAS/服务器）与云端（Docker/Kubernetes）部署详解与对比
本地（NAS/服务器）与云端（Docker/Kubernetes）部署详解与对比 一、本地部署（NAS/服务器） 适用场景： 需要完全控制硬件和数据（如隐私敏感场景）。小规模应用或测试环境。网…...
如何解决极狐GitLab 合并冲突？
极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 合并冲突 (BASIC ALL) 合并冲突发生在合并请求的两个分支（源分支和目标分支）对相同代码行进行了不同…...
DeepSeek在物联网设备中的应用：通过轻量化模型实现本地化数据分析
文章目录 一、引言二、DeepSeek轻量化模型的技术原理1. 模型量化2. 模型剪枝3. 动态精度调整 三、本地化数据分析的实现路径1. 硬件环境配置2. 模型加载与推理3. 数据预处理与后处理 四、行业应用案例1. 医疗智能穿戴设备2. 工业设备预测性维护3. 智能家居能耗优化 五、性能优化…...
opencv--图像
像素(像素点) 定义： Pixel 是 Picture Element（图像元素）的缩写，是数字图像中最小的独立单位。每个像素代表图像中的一个点的颜色和亮度信息。 关键特性： 颜色：通过不同的色彩模型（如RGB、CMYK…...
【KWDB 创作者计划】_嵌入式硬件篇---数字电子器件
文章目录 前言一、系列前缀（如 "74" 或 "54"）74（商用级）54（工业级）二、逻辑家族（如 "LS"、"HC"、"HCT" 等）TTL（晶体管-晶体管逻辑）家族CMOS（互补金属氧化物半导体）家族BiCMOS（双极 CMOS）家族三、功能编号（如…...
前端加密介绍与实战
前端数据加密 文章目录 前端数据加密前端数据加密介绍为什么需要前端数据加密？前端数据加密的常见方式前端数据加密的实现场景：加密用户密码并发送到后端步骤 1：安装加密库步骤 2：实现加密逻辑步骤 3：后端解密 实战总结…...
DAG（有向无环图）计算模型面试内容整理-拓扑排序（Topological Sort）和节点依赖与并行度
拓扑排序（Topological Sort） 拓扑排序（Topological Sort）： 拓扑排序是针对有向无环图（DAG）的一种线性排序方法。这种排序方法的特点是，对于DAG中的每一条有向边 (A → B)，在拓扑排序中节点A总是排在节点B之前。...
AI语音助手自定义角色百度大模型 【全新AI开发套件掌上AI+4w字教程+零基础上手】
1、简介 此项目主要使用ESP32-S3实现一个自定义角色的AI语音聊天助手（比如医生角色），可以通过该项目熟悉ESP32-S3 arduino的开发，百度语音识别，百度语音合成API调用，百度APPBuilder API的调用实现自定义角…...
【Java面试笔记：基础】13.谈谈接口和抽象类有什么区别？
在 Java 中，接口（Interface） 和 抽象类（Abstract Class） 都是实现多态和代码抽象的机制，但它们在设计目的、语法特性及使用场景上有显著差异。 1. 接口和抽象类的区别 接口（Interface） 定义：接口是对行为的抽象，是抽象方法的集合，用于定义 API 规范。 特点： 不能…...
内存管理（Linux程序设计）
内存管理 目录 内存管理 一.简单的内存分配 代码功能概述 代码流程图 变量声明 动态内存分配 内存分配错误检查 向内存写入字符串 设置退出状态并退出程序 二.请求全部的物理内存 代码功能概述 变量声明 三..可用内存 四.滥用内存 1.代码功能（预期 …...
Prompt 结构化提示工程
Prompt 结构化提示工程 目前ai开发工具都大同小异，随着deepseek的流行，ai工具的能力都差不太多，功能基本都覆盖到了。而prompt能力反而是需要更加关注的（说白了就是能不能把需求清晰的输出成文档）。因此大家可能需要加…...
Postman设置了Cookies但是请求不携带Cookie
1 问题说明 使用Postman工具往往要向本地服务器发送请求携带Cookie便于测试接口，但是在Send下面的Cookies选项中设置域名127.0.0.1，并添加Cookie，发现发送的请求怎么都不会携带Cookie： 通过Fiddler抓包发现并没有Cookie࿱…...
微服务Nacos组件的介绍、安装、使用
微服务Nacos组件的介绍、安装、使用 在微服务架构日渐普及的今天，服务注册与配置管理成了系统架构中的关键环节。阿里巴巴开源的 Nacos（Naming and Configuration Service）正是解决这一问题的利器。本文将为你全面介绍 Nacos 的概念、安装方…...
深度剖析塔能科技精准节能方案：技术创新与实践价值
在能源管理领域不断追求高效与可持续发展的进程中，塔能科技的精准节能方案逐渐成为行业内备受瞩目的焦点。 精准节能：核心技术与实现路径 塔能科技的精准节能理念建立在对能源消耗的精细监测与深度分析基础之上。以其节能管理平台为例，该平台…...
AI PPT创作原理解析：让你的演示文稿更智能
在当今信息爆炸的时代，演示文稿已成为我们工作和学习中不可或缺的一部分。然而，制作一份高质量的PPT往往需要投入大量的时间和精力。随着人工智能技术的迅猛发展，AI PPT创作工具应运而生，极大地简化了PPT的制作过程。本文将深入解…...
ollama本地搭建大模型
dajdaj人工智能，现在流行的大模型有很多，像流行的：gpt-3.5-turbo、通义千问2.5，Llama3； 本地安装大模型有什么好处 大模型都是开源的，安装在自己的电脑上也是免费使用的；可以结合自己的私有文…...
AIGC（生成式AI）试用 31 -- AI做软件程序测试 2
接上文 AIGC（生成式AI）试用 30 -- AI做软件程序测试 1 整合测试项提问并输出测试用例思考并调整提问方式，为完整的输年程序测试提问准备 - 再次对需求提问 --> 实际是之前的提问记录找不到了，不过有新发现；不妨后…...
【深度学习与大模型基础】第13章-什么是机器学习
1. 什么是机器学习？ 想象你在教一个小朋友认猫： 传统编程：你写一本《猫的100条特征手册》（比如有胡须、尖耳朵），让计算机对照检查。 机器学习：你直接给计算机看1000张猫和狗的图片，…...
大数据利器Kafka
大数据利器Kafka：从入门到实战的全面指南 在大数据的世界里，Kafka就像是一个高效的“数据快递员”，负责在不同的系统之间快速、可靠地传递数据。今天，咱们就一起来深入了解一下这个强大的工具。Kafka是由LinkedIn开发的分布式发布…...
工具指南：免费将 PDF 转换为 Word 的 10 个工具
可移植文档格式或 PDF 是大多数企业使用的流行文件格式，主要用于共享项目材料并确保整个团队协同工作。它还有助于避免处理大量文档和丢失关键数据。使用顶级 PDF 转换器还可以更轻松地高效地进行日常活动。企业可以依靠专业的文档扫描服务对其他格式的文档进行 PDF…...
Elasticsearch复习笔记
文章目录 ES 基础为什么用 Elasticsearch初识和安装概述安装 elasticsearch安装 Kibana 倒排索引正向索引倒排索引正向和倒排 基础概念文档和字段索引和映射MySQL 和 elasticsearch IK 分词器安装 IK 分词器使用 IK 分词器拓展词典 ES 索引库操作Mapping 映射属性ES 索引库的 C…...
STM32 SysTick定时器
一、SysTick系统定时器概述 1.1 什么是SysTick定时器 SysTick（System Tick Timer）是ARM Cortex-M系列处理器内核集成的24位系统定时器，作为ARM架构的标准外设，它被深度整合在NVIC（嵌套向量中断控制器）中。…...
Modbus TCP协议介绍、原理解析与应用示例
深入了解Modbus TCP协议：介绍、原理解析与应用示例 在工业自动化领域，设备之间的通信与数据交换至关重要。Modbus协议作为一种经典的通信协议，因其简单、开放和易于实现的特点，被广泛应用于各种工业设备之间的数据传输。而Modbus…...
Elasticsearch 报错 Limit of total fields [1000] has been exceeded
一、错误代码： spring boot 链接es 插入审计日志数据报错： Caused by: org.elasticsearch.ElasticsearchException: Elasticsearch exception [typeillegal_argument_exception, reasonLimit of total fields [1000] has been exceeded while adding ne…...
maven中pom.xml setting.xml关系
1 在Spring Boot项目中，pom.xml和settings.xml文件都可以配置Maven仓库地址，但它们的作用和优先级有所不同。 ● settings.xml： ○ 配置本地仓库：使用 <localRepository> 元素指定本地仓库的路径。 ○ 配…...
PubLayNet：文档布局分析领域的大规模数据集
PubLayNet：文档布局分析领域的大规模数据集 1. 数据集概述 PubLayNet（Public Layout Network）是由IBM AUR NLP团队开发的大规模文档图像数据集，旨在推动文档理解与布局分析领域的研究。该数据集通过自动标注技术，对科…...
JAVA----方法
好久没发博客了~~~~~重生之我开始补知识 1.What is 方法（method） 方法是程序中最小的执行单元。 简单来说，就是将一些重复代码打包，要用的时候我们进行调用就好！ e.g. public static void main（String…...
mybatis xml中特殊字符处理
1，CDATA区： 它的全称为character data,以"<![CDATA[ "开始，以" ]]>" 结束，在两者之间嵌入不想被解析程序解析的原始数据，解析器不对CDATA区中的内容进行解析，而是将这些数据原封…...
vue3+dhtmlx 甘特图真是案例
使用vue3 ts dhtmlx 实现项目任务甘特图展示 支持拖拽，选择人员，优先级，开发状态，进度 效果图 完整代码 安装命令：npm i dhtmlx-gantt <template><div style"height: 100%; background-color: white…...
Chrome/Edge浏览器使用多屏完美解决方案，http部署使用https部署的功能
多屏使用场景：例如1屏显示录入操作界面，2屏显示SOP。或者每个屏上显示不同的看板内容等 废话不少说，直接上代码：将下面的代码复制到txt记事本里，保存为html格式即可本地观看效果 <!DOCTYPE html> <html>…...
Linux中进程的属性：状态
一、通用OS进程中的各种状态与相关概念 1.1通用进程中的状态 CPU执行进程代码，不是把进程执行完才开始执行下一个，而是给每个进程预分配一个“时间片”， CPU基于时间片进行轮转调度（每个CPU分别进行） 其中发涉及到的…...
软件架构师常用的软件工具有哪些
软件架构师的工作离不开多种工具的支撑，主要包括 建模与设计工具、文档与协作平台、代码质量与静态分析工具、性能与监控工具、DevOps 工具链、架构可视化与管理平台 等。其中，建模与设计工具 是架构师最核心的武器，能够帮助其从业务抽象到技…...
rl中，GRPO损失函数详解。
文章目录 **一、GRPO损失函数的设计背景****二、代码逐行解析****三、关键组件详解****1. 对数概率与KL散度计算****2. 优势值与策略梯度****3. 掩码与平均损失****四、训练动态与调参建议**在TRL（Transformer Reinforcement Learning）库中，GRPO（Group Relative Policy Opt…...
奇安信春招面试题
奇安信面试真题，以下是5道具有代表性的经典技术面试题及其解析，覆盖网络安全、渗透测试、安全架构设计等核心领域。 《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.…...