当前位置：首页 > news >正文

vue-点击生成动态值，动态渲染回显输入框

news 来源：原创 2025/5/16 0:23:26

1.前言

动态点击生成数值，回显输入框，并绑定。

2.实现

<template><div style="display:flex;align-items: center;flex-direction:row"><a-input:key="inputKey"v-model="uploadData[peo.field]"placeholder="回显"disabled/><a-button type="primary" @click="workNumProduce">点击生成</a-button></div>
</template><script>
export default {data() {return {uploadData: {// 假设peo.field是'workNum'workNum: ''},peo: {field: 'workNum'},inputKey: Date.now() // 初始key值};},methods: {workNumProduce() {// 生成工号逻辑，这里只是一个示例const workNum = 'G' + Math.floor(Math.random() * 1000000);this.uploadData[this.peo.field] = workNum;this.inputKey = Date.now(); // 更新key值，强制刷新<a-input>}}
};
</script>

当key的值发生变化时，Vue会重新渲染该组件。将key绑定到一个动态的值，例如一个时间戳，这样每次点击按钮时，key的值都会更新，从而强制刷新<a-input>组件。

3.强制刷新this.$forceUpdate()

vue-强制更新组件this.$forceUpdate()-CSDN博客文章浏览阅读244次。强制更新组件this.$forceUpdate()https://blog.csdn.net/2301_76671906/article/details/145563122?fromshare=blogdetail&sharetype=blogdetail&sharerId=145563122&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link

vue-点击生成动态值，动态渲染回显输入框

1.前言动态点击生成数值，回显输入框，并绑定。 2.实现 <template><div style"display:flex;align-items: center;flex-direction:row"><a-input:key"inputKey"v-model"uploadData[peo.field]"placehold…...

编程日记 2025/5/16 0:23:26

Idea 插件 Quickly-Code-Toolkit

使用说明 （一）全局设置 Paging Wrapper Setting（分页设置） 功能：主要用于在方法写入时，为返回参数提供分页包装类。设置方式：需准确填写分页包装类的全限定名，例如：com…...

编程日记 2025/5/13 17:42:53

fun-transformer学习笔记-Task1——Transformer、Seq2Seq、Encoder-Decoder、Attention之间的关系

Transformer、Seq2Seq、Encoder-Decoder、Attention由这四者之间的关系可以从模型架构的发展脉络来理解： Seq2Seq 与 Encoder–Decoder 模型 “Seq2Seq”（sequence‐to‐sequence）是一类用于将一个变长序列映射为另一个变长序列的任务&#x…...

编程日记 2025/5/13 17:41:45

使用瑞芯微RK3588的NPU进行模型转换和推理

使用边缘设备进行算法落地时，通常要考虑模型推理速度，NVIDA系列平台可以使用TensorRT和CUDA加速，瑞芯微RK3588的板子上都是Arm的手机GPU，虽然没有类似CUDA的加速计算方式，但是提供了NPU进行加速推理，本文说…...

编程日记 2025/5/12 12:51:22

mysql读写分离与proxysql的结合

上一篇文章介绍了mysql如何设置成主从复制模式，而主从复制的目的，是为了读写分离。读写分离，拿spring boot项目来说，可以有2种方式： 1）设置2个数据源，读和写分开使用 2）使用中间件…...

编程日记 2025/5/14 4:02:44

Vue笔记（九）

一、文章分类架子--PageContainer 学习PageContainer组件的封装，这一组件用于搭建页面基础结构，为后续内容展示提供统一布局。它可能包含通用的页面样式、导航栏、侧边栏等基础元素的结构搭建。在Vue组件中， <template> 标签内定义基础…...

编程日记 2025/5/7 13:34:39

YOLO11框架使用

YOLO11 1. Frame Understanding2. What can YOLO11 do?3.如何训练自己数据集？3.1 配置环境3.2 制作自己数据集3.3 配置文件3.3.1 数据集配置文件3.3.2 网络模块配置文件4.修改训练参数配置文件5. 训练脚本编写6.结果展示1. Frame Understanding 2. What can YOLO11 do? Ult…...

编程日记 2025/5/15 22:34:07

RK3588视觉控制器与AI 算法：开启工业视觉检测新境界

在实际应用中，工业相机拍摄产品的图像，RK3588 迅速接收并进行预处理。AI 算法随即对图像进行深入分析，提取特征并与预设的标准进行对比，从而准确判断是否存在缺陷。例如，在电子元件生产线上，RK3588 和 AI…...

编程日记 2025/5/11 17:39:12

C语言基础入门：2.5基础输入输出

【C语言基础】输入输出完全指南：从printf到缓冲区安全文章目录【C语言基础】输入输出完全指南：从printf到缓冲区安全一、格式化输出艺术：printf函数详解二、scanf输入安全与缓冲区处理三、字符级交互：getchar与putchar实战程序员…...

编程日记 2025/5/13 21:00:20

压缩stl文件大小

1、MeshLab下载界面，从MeshLab下载适合自己系统的最新版本。 2、打开 MeshLab软件，将stl文件拖入其中。 3、 4、Percentage reduction参数即为缩放比例，根据自身想要将文件压缩到多大来。然后点击apply 5、CtrlE弹出窗口保存文件后&…...

编程日记 2025/5/9 23:00:26

二、交换机的vlan子设备接入

一、交换机的vlan设置-CSDN博客二、交换机的vlan子设备接入-CSDN博客接上篇的文章，本文接入了子设备网络结构如下： 用路由器A和POE交换机B代替第一篇中的笔记本电脑，路由器A和交换机B都关闭DHCP服务，并分别接入一个IPC&#…...

编程日记 2025/5/15 4:57:58

KEPServerEX 的接口类型与连接方式的详细说明

目录一、KEPServerEX 核心架构二、KEPServerEX 支持的接口类型三、KEPServerEX 支持的连接类型 1. 通用工业协议 2. 品牌专属协议 3. 行业专用协议 4. 数据库与文件接口四、配置示例 1. 接口配置（以OPC UA为例） 2. 连接配置（以…...

编程日记 2025/5/13 12:43:36

Stack(栈)

定义：在Java编程语言中，栈(Stack)是一种非常重要的数据结构，具有后进先出的特性，即最后入栈的元素最先出栈。栈通常用于存储临时性的数据，如方法调用过程中的局部遍历、操作数栈等。图像理解： 我们在这里要…...

编程日记 2025/5/13 7:20:40

【Vue3 Computed 与 Watch 维护对比】

让我们从开发体验和维护性的角度深入对比 computed 和 watch，通过具体场景分析它们的差异： 一、维护成本对比 1. 依赖管理差异 // 原始代码 const productFilter computed(() > {return products.value.filter((p) > p.price > minPrice.val…...

编程日记 2025/5/14 9:56:33

在node.js环境中使用web服务器http-server运行html静态文件

http-server http-server是一个超轻量级web服务器，它可以将任何一个文件夹当作服务器的目录供自己使用。当我们想要在服务器运行一些代码，但是又不会配置服务器的时候，就可以使用http-server就可以搞定了。使用方法因为http-server需要…...

编程日记 2025/5/12 22:55:29

详解电子邮箱工作原理｜SMTP、POP3、IMAP、SPF、MIME

写在前面电子邮件（Email）是一种通过互联网进行异步通信的技术，工作原理涉及多个协议、服务器和客户端协同工作。接下来我们来介绍一下电子邮箱的工作原理 1. 电子邮件的核心组成部分邮件客户端：用户直接交互的软件&#xf…...

编程日记 2025/5/10 9:33:35

算法学习笔记之并查集

简介问题描述：将编号为1-N的N个对象划分为不相交集合，在每个集合中，选择其中的某个元素代表所在集合。常见两种操作： 1.合并两个集合 2.查找某元素属于哪个集合实现方法1 用编号最小的元素标记所在集合； 定义…...

编程日记 2025/5/10 2:03:40

【开源项目】ShowDoc适合IT团队的在线API文档、技术文档工具

1. 介绍通过showdoc，可以方便地使用markdown语法来书写出美观的API文档、数据字典文档、技术文档、在线excel文档等等。还可以利用showdoc的自动化能力，从程序注释中自动生成API文档，或者从搭配的RunApi客户端（类似postman的api…...

编程日记 2025/5/11 10:08:29

Tomcat添加到Windows系统服务中，服务名称带空格

要将Tomcat添加到Windows系统服务中，可以通过Tomcat安装目录中“\bin\service.bat”来完成，如果目录中没有service.bat，则需要使用其它方法。打到CMD命令行窗口，通过cd命令跳转到Tomcat安装目录的“\bin\”目录，然后执…...

编程日记 2025/5/14 6:29:52

SQL最佳实践（笔记）

写在前面： 之前baeldung的Java Weekly Reviews里面推荐了一篇关于SQL优化的文章，正好最近在学习数据库相关知识，记一些学习笔记原文地址：SQL Best Practices Every Java Engineer Must Know 1. 使用索引使用索引…...

编程日记 2025/5/11 9:06:22

历史性突破！DeepSeek双模型GitHub热度超OpenAI，展现中国AI力量

在2025年2月7日，中国AI领域传来了一则振奋人心的消息：DeepSeek旗下的两大开源项目在GitHub平台上实现了历史性突破，其Star数成功超越了OpenAI的明星项目。这一成就不仅标志着DeepSeek在技术研发和市场影响力上的重大飞跃，也为中国…...

编程日记 2025/5/13 4:38:27

deepseek+kimi一键生成PPT

1、deepseek生成大纲内容访问deepseek官方网站：https://www.deepseek.com/ 将你想要编写的PPT内容输入到对话框，点击【蓝色】发送按钮，让deepseek生成内容大纲，并以markdown形式输出。等待deepseek生成内容完毕后&#xff0c…...

编程日记 2025/5/14 1:59:33

Java学习

一、赋值赋值表达式，左边一定是变量，右边是变量或者数值，变量与数值都有类型，(数值里整数默认int,小数默认double) 类型由小转大，存储空间变大，数据不会丢失，是安全的，在需要时编译…...

编程日记 2025/5/14 7:32:55

Shell-基本命令与运算符

1.为什么要进行shell编程? 在Linux系统中，虽然有各种各样的图形化接口工具，但是shell仍然是一个非常灵活的工具。 Shell不仅仅是命令的收集，而且是一门非常棒的编程语言。您可以通过使用shell使大量的任务自动化， 因此&#…...

编程日记 2025/5/11 9:44:25

JUnit 5 自定义注解：方法级 JSON 参数注入

JUnit 5 自定义注解：方法级 JSON 参数注入为了实现在测试方法上使用注解，并通过注解属性指定参数名称和 JSON 字符串（转换为 Java 对象），以下是基于 JUnit 5 正确扩展接口的解决方案： 一、实现步骤 1. …...

编程日记 2025/5/15 17:48:46

anolis os 8.9安装jenkins

一、系统版本 # cat /etc/anolis-release Anolis OS release 8.9 二、安装 # dnf install -y epel-release # wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo # rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.…...

编程日记 2025/5/13 22:36:35

【CXX】0 Rust与C 互操作利器：CXX库介绍与示例

CXX库是一个非常强大的工具，它使得Rust和C之间的互操作性变得既安全又高效。本专栏将展示如何使用CXX库来桥接Rust和C代码，同时保持两者语言的特性和惯用法。一、关键概念回顾类型安全：CXX库通过静态分析类型和函数签名来保护Rust和C的不…...

编程日记 2025/5/13 4:52:12

tensorflow环境中已安装库

1. 深度学习课前准备工作 Anaconda3、TensorFlow和keras安装方法 1 下载Anaconda： Anaconda3-5.2.0-Windows-x86_64.exe 双击安装，选定环境变量 2 开始菜单打开Anaconda Prompt：（2、3、4有链接科学上网） 创建环境&am…...

编程日记 2025/5/7 13:04:36

构建现代微服务安全体系：Spring Security、JWT 与 Spring Cloud Gateway 实践

构建现代微服务安全体系：Spring Security、JWT 与 Spring Cloud Gateway 实践本文将基于提供的代码示例，详细介绍如何在一个Java微服务项目中使用Spring Security、JWT和Spring Cloud Gateway来构建一个高效且安全的微服务体系，并整合性能优…...

编程日记 2025/5/12 13:41:49

蓝桥杯（B组）-每日一题（求最大公约数最小公倍数）

题目： 代码展现： #include<iostream> using namespace std; int main() {int m,n,x,y;cin>>m>>n;//输入两个整数int b;bm%n;//取余数xm;//赋值yn;while(b)//当余数不为0的时候{xy;//辗转相除求最小公约数yb;bx%y;}cout<<y<&…...

编程日记 2025/5/15 9:17:37

RocketMQ、RabbitMQ、Kafka 的底层实现、功能异同、应用场景及技术选型分析

1️⃣ 引言在现代分布式系统架构中，📩消息队列（MQ）是不可或缺的组件。它在系统🔗解耦、📉流量削峰、⏳异步处理等方面发挥着重要作用。目前，主流的消息队列系统包括 🚀RocketMQ、&…...

编程日记 2025/5/10 23:30:04

CEF132编译指南 MacOS 篇 - 构建 CEF (六)

1. 引言经过前面一系列的精心准备，我们已经完成了所有必要的环境配置和源码获取工作。本篇作为 CEF132 编译指南系列的第六篇，将详细介绍如何在 macOS 系统上构建 CEF132。通过配置正确的编译命令和参数，我们将完成 CEF 的构建工作&#xf…...

编程日记 2025/5/14 0:25:28

使用stm32控制esp01s

title: 使用stm32控制esp01s date: 2025年2月9日 18:41:20 tags: 单片机模块使用 categories: stm32 description: 使用stm32控制esp01s连接WiFi查看内容等操作前言使用stm32f103控制esp01s是步入物联网的第一步，接下来的文章会详细讲解如何使用stm32控制esp01s…...

编程日记 2025/5/9 22:31:54

返回倒数第N个链表节点

力扣题目：LCR 140. 训练计划 II - 力扣（LeetCode） 给定一个头节点为 head 的链表用于记录一系列核心肌群训练项目编号，请查找并返回倒数第 cnt 个训练项目编号。示例 1： 输入：head [2,4,7,8], cnt 1 输…...

编程日记 2025/5/10 2:51:34

一、计算机等级考试——标准评分

（1）选择题未做选择题 （2）基本造作 （3）上网题 （4）文字题 （5）表格题 （6）演示文稿二、计算机等级考试——题库 （1&#x…...

编程日记 2025/5/13 7:46:11

tweenjs动画

目录编辑安装 HTML中应用 Threejs中应用安装 npm install tweenjs/tween.js HTML中应用 <script src"https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script><div id"box"></div><style…...

编程日记 2025/5/14 17:33:33

IGBT工作原理

IGBT其实可以看成是BJT和MOS管的融合体，IGBT具有BJT的输入特性和mos管的输出特性。与 BJT 或 MOS管相比，绝缘栅双极型晶体管 IGBT 的优势在于它提供了比标准双极型晶体管更大的功率增益，以及更高的工作电压和更低的 MOS 管输入损耗。 IGBT是绝…...

编程日记 2025/5/15 0:47:03

FlashDecoding

Flash Attention是将Q划分到所有SM block上。每个SM block上的Q，负责和所有K和所有V进行计算，得到对应的结果。期间，SM block彼此之间，不需要通信。在prefill阶段，seqLength*batchSize*Heads足够多，所以每…...

编程日记 2025/5/14 13:53:12

03：Spring之Web

一：Spring整合web环境 1：web的三大组件 Servlet：核心组件，负责处理请求和生成响应。 Filter：用于请求和响应的预处理和后处理，增强功能。 Listener：用于监听 Web 应用中的事件，实…...

编程日记 2025/5/14 8:15:13

OpenWebUI使用DeepSeek R1满血版，DeepSeek R1 API调用

https://www.dong-blog.fun/post/1935 API调用登录这里： https://console.volcengine.com/ark/region:arkcn-beijing/endpoint?config%7B%7D 注册后，创建DeepSeek R1 API接入点： 接着Python就可以直接调用了： import os fro…...

编程日记 2025/5/11 22:40:46

DeepSeek模型场景应用：基于腾讯云HAI搭建IDEA开发助手

前言这段时间国产大模型DeepSeek十分火爆，DeepSeek模型凭借其强大的语言理解和生成能力，为开发场景带来了全新的可能性，DeepSeek模型场景应用也是十分广泛，而基于腾讯云HAI搭建IDEA开发助手，更是将这种潜力发挥到了极…...

编程日记 2025/5/13 8:13:14

HttpServletRequest 作用

HttpServletRequest 接口在 Java Servlet API 中扮演着至关重要的角色，它是 Servlet 处理客户端 HTTP 请求的核心对象。每次客户端（例如浏览器）向服务器发送一个 HTTP 请求时，Servlet 容器（例如 Tomcat）都…...

编程日记 2025/5/14 12:21:49

Python----PyQt开发（PyQt高级：手搓一个简单的记事本）

一、效果展示二、设计PyQt界面 2.1、设置图标 self.setWindowIcon(QIcon(./images/icon/1.png)) # 窗口图标 2.2、设置标题 self.file_name 无标题-新建文本文档 # 默认文件名 self.setWindowTitle(self.file_name) # 窗口标题 2.3、添加菜单栏、工具栏、状态栏 # 创…...

编程日记 2025/5/14 2:43:36

MySQL 索引失效案例：字符集不匹配的隐蔽影响

引言在 MySQL 数据库世界里，索引失效往往是性能问题的罪魁祸首。你是否曾遇到过这样的情况：明明加了索引，查询却慢如蜗牛？你是否曾以为小表查询就一定高效？本文将揭示一个真实的案例，一个容易被忽视的“隐…...

编程日记 2025/5/11 5:31:57

MySQL中类似PostgreSQL中的string_agg函数--GROUP_CONCAT函数的使用

文章目录结论：MySQL没有string_agg，但有GROUP_CONCATGROUP_CONCAT函数的基本用法示例注意事项系统变量 group_concat_max_len 如何查看和设置查看当前的group_concat_max_len值设置group_concat_max_len值相关源码相关链接结论：MySQL没有…...

编程日记 2025/5/13 6:24:32

科普：数据血缘理论中：任务血缘、表血缘、字段血缘

在讨论数据血缘时通常我们提到的是数据库血缘、数据表血缘和数据字段血缘，而“任务血缘”这一术语更多是在特定技术场景（如实时任务运维）中使用。数据血缘分类表血缘表血缘（或数据表血缘）是指数据在不同数据表之…...

编程日记 2025/5/13 15:03:38

凸性相关问题

内容大致上包括： 四边形不等式，决策单调性闵可夫斯基和优化 d p dp dpslope trick 优化 d p dp dp其他凸性相关问题决策单调性 1.1 一些约定对于 n m n\times m nm 的矩阵 A A A，定义： 子矩阵 A [ i 1 , . . . , i p …...

编程日记 2025/5/15 6:12:30

WPS计算机二级•文档的文本样式与编号

听说这是目录哦标题级别❤️新建文本样式快速套用格式🩷设置标题样式自定义设置多级编号🧡使用自动编号💛取消自动编号💚设置页面边框💙添加水印🩵排版技巧怎么分栏💜添加空白下划线&#x…...

编程日记 2025/5/14 5:51:05

开源堡垒机 JumpServer 社区版实战教程：一步步构建企业安全运维环境

文章目录开源堡垒机 JumpServer 社区版实战教程：一步步构建企业安全运维环境一、访问JumpServer1.1 登录1.2 功能模块1.3 系统设置1.3.1 基本设置1.3.2 邮件设置二、用户管理2.1 场景2.2 创建用户2.3 用户登录密码重置三、资产管理3.1 准备工作3.2 登录控制台3.3…...

编程日记 2025/5/11 11:31:05

二、数据类型、运算符

1. 数据的表示详解 1.1 算术运算符整数在计算机中的存储原理先从最基本的算术运算符开始学习，算术运算符有 - * / % ，其中*表示乘法，/表示除法，%表示取余数需要我们注意以下几点 /: 两个整数相除，结果也是一个…...

编程日记 2025/5/11 1:29:55

1.前言

2.实现

3.强制刷新this.$forceUpdate()

相关文章：