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

点击加号添加新的输入框

实现点击加号添加新的输入框
实现如上图的效果

html部分:

<el-form-item class="forminput" v-for="(item,index) in formdata.description" :key="index" :label="'描述'+(index+1)" prop="description"><el-input v-model="formdata.description[index]"></el-input><el-button type="primary" icon="el-icon-plus" circle @click="adddescritpion"></el-button>
</el-form-item>

js部分:
data:

formdata:{name_en:'',name_cn:'',url:'',type:0,description:['']
}

按钮的方法adddescritpion:

adddescritpion(){this.formdata.description.push('');
}

css部分:
因为会有多个forminput,所以选取除了最后一个的forminput,并设置他们的后代元素el-button的显示模式为none,就会使得其他的加号都消失。

.forminput:not(:nth-last-child(1)) .el-button{display: none;
}

点击加号后,会在formdata的description数组中再加入一个空的字符串,v-for重新渲染,就会生成一个新的输入框

注意:input中的v-model不能绑定为item,会报错,因为这样绑定无法修改v-for源数组,因为写入别名就跟修改函数形参一样。应采用上面的数组形式绑定。

相关文章:

点击加号添加新的输入框

实现如上图的效果 html部分&#xff1a; <el-form-item class"forminput" v-for"(item,index) in formdata.description" :key"index" :label"描述(index1)" prop"description"><el-input v-model"formdata…...

SQL AND OR 运算符

AND & OR 运算符用于基于一个以上的条件对记录进行过滤。 如果第一个条件和第二个条件都成立&#xff0c;则 AND 运算符显示一条记录。 如果第一个条件和第二个条件中只要有一个成立&#xff0c;则 OR 运算符显示一条记录。 下面是选自 "students" 表的数据&a…...

6、C++内存模型

原文&#xff1a; https://my.oschina.net/u/2516597/blog/805489 背景 C11开始支持多线程&#xff0c;其中提供了原子类型atomic, 和atomic关系比较密切的是memory_order&#xff0c;所有的内存模型都是指atomic类型 enum memory_order {memory_order_relaxed,memory_order…...

上海市青少年算法2023年1月月赛(丙组)

上海市青少年算法2023年1月月赛(丙组)T1 实验日志 题目描述 小爱正在完成一个物理实验,为期n天,其中第i天,小爱会记录ai条实验数据在实验日志中。 已知小爱的实验日志每一页最多纪录m条数据,每天做完实验后他都会将日志合上,第二天,他便从第一页开始依次翻页,直到找到…...

移动开发之Wifi列表获取功能

一、场景 业务需要通过App给设备配置无线网络连接&#xff0c;所以需要App获取附近的WiFi列表&#xff0c;并进行网络连接验证。 二、安卓端实现 1、阅读谷歌官网文档&#xff0c;关于Wifi 接口使用 https://developer.android.com/guide/topics/connectivity/wifi-scan?hl…...

MyBatisPlus - 实体类 的 常用注解

TableName(“表名”) 假设 表名是 book&#xff0c;实体类类名是 Book MyBatisPlus会进行自动映射 但如果 表名是 tab_book&#xff0c;实体类类名是 Book 那么MyBatisPlus就无法进行自动映射&#xff0c;需要我们使用 TableName注解 去指定实体类对应的表 如下 TableNa…...

vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能

一、TableTreeLevel组件 <template><div classmain><div class"btns"><el-button type"primary" click"expandLevel(1)">展开一级</el-button><el-button type"primary" click"expandLevel(2…...

Qt之切换语言的方法(传统数组法与Qt语言家)

http://t.csdn.cn/BVigB 传统数组法&#xff1a; 定义一个字符串二维数组&#xff0c; QString weekStr[2][7] {"星期一","星期二","星期三","星期四","星期五","星期六","星期日",\ "Monday&…...

qt root start faild

深入解析chown -r root:root命令_笔记大全_设计学院 ffmpeg第五弹&#xff1a;QtSDLffmpeg视频播放演示_txp玩Linux的博客-CSDN博客...

数据结构—串

4.1串 4.1.1串的定义 串&#xff08;String&#xff09;——零个或多个任意字符组成的有限序列 S"a1 a2...an"串的定义——几个术语 子串&#xff1a;串中任意个连续字符组成的子序列称为该串的子串 例如&#xff0c;“abcde”的子串有&#xff1a; “ ”、“a”、…...

hive 全量表、增量表、快照表、切片表和拉链表

全量表&#xff1a;记录每天的所有的最新状态的数据&#xff0c;增量表&#xff1a;记录每天的新增数据&#xff0c;增量数据是上次导出之后的新数据。快照表&#xff1a;按日分区&#xff0c;记录截止数据日期的全量数据切片表&#xff1a;切片表根据基础表&#xff0c;往往只…...

数据结构07:查找[C++][B树Btree]

图源&#xff1a;文心一言 考研对于B树的要求重点在推理手算的部分&#xff0c;只参考王道论坛咸鱼老师的视频就可以了&#xff1b;若时间非常充裕的小伙伴&#xff0c;也可以往下滑了解一下代码~&#x1f95d;&#x1f95d; 备注&#xff1a; 这次的代码是从这里复制的&…...

在CSDN学Golang云原生(Kubernetes集群管理)

一&#xff0c;Node的隔离与恢复 在 Kubernetes 集群中&#xff0c;Node 的隔离与恢复通常可以通过以下方式实现&#xff1a; 使用 Taints 和 Tolerations 实现隔离 Taints 和 Tolerations 是 Kubernetes 中用于节点调度的机制。通过给节点添加 taints&#xff08;污点&…...

WPF实战学习笔记18-优化设计TodoView

文章目录 优化设计TodoView修复新增项目无法编辑问题增加了对完成状态的区分增加了选项卡删除功能更新删除请求URI添加删除命令并初始化UI添加删除按钮更改控制器 增加查询结果为空的图片增加转换器修改UI添加资源、命名空间 添加相关元素 增加了根据状态查询的功能Mytodo.Serv…...

Python版day59

503. 下一个更大元素 II 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序&#xff0c;这个数字之后的第一个比它更大的数&…...

[SQL挖掘机] - 算术运算符

在 sql 中&#xff0c;算术运算符主要用于执行数值计算操作&#xff0c;并且在查询语句中具有重要的地位。下面是算术运算符在 sql 中的一些作用和地位&#xff1a; 进行数值计算&#xff1a;算术运算符可以对数值类型的数据进行加减乘除等数值计算操作。例如&#xff0c;可以…...

机器学习基础 数据集、特征工程、特征预处理、特征选择 7.27

机器学习基础 1. 数据集 2. 特征工程 3. 学习分类 4. 模型 5. 损失函数 6. 优化 7. 过拟合 8. 欠拟合数据集 又称资料集、数据集合或者资料集合&#xff0c;是一种由数据所组成的集合特征工程 1. 特征需求 2. 特征设计 3. 特征处理特征预处理、特征选择、特征降维 4. 特征验…...

Sass 常用的功能!

Sass 常用功能 Sass 功能有很多&#xff0c;这边只列举一些比较常用的。 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中&#xff0c;内层的样式将它外层的选择器作为父选择器。 编译前 .box {.box1 {background-color: red;}.box2 {background-col…...

chmod命令详细使用说明

chmod命令详细使用说明 chmod是Unix和类Unix系统上用于更改文件或目录权限的命令。它是"change mode"的缩写。在Linux和其他类Unix操作系统中&#xff0c;文件和目录具有权限位&#xff0c;用来控制哪些用户可以访问、读取、写入或执行它们。chmod命令允许用户修改这…...

ICC2如何计算Gate Count?

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f;知识星球入口 我们认为gate count等于standard cell(非physical only)总面积 / 最小驱动二输入与非门面积。 ICC2没有专门的命令去报告gate count&#xff0c;只能自己计算&#xff0c;使用report_d…...

别再只用Service了!ROS1 Action通信保姆级教程:从导航进度条到任务取消,手把手教你实现带反馈的机器人任务

别再只用Service了&#xff01;ROS1 Action通信保姆级教程&#xff1a;从导航进度条到任务取消&#xff0c;手把手教你实现带反馈的机器人任务当你的机器人正在执行一个长达10分钟的导航任务时&#xff0c;突然发现目标点设置错误&#xff0c;这时候如果只能干等着任务完成或者…...

PCB虚焊/走线断裂/焊盘脱落工程师易漏判

PCB 故障中&#xff0c;30% 并非元件损坏&#xff0c;而是 PCB 本身的隐性故障—— 虚焊、走线断裂、焊盘脱落、过孔开路。这类故障外观隐蔽、时好时坏、排查难度大&#xff0c;很多工程师反复更换元件仍无法解决&#xff0c;最终误判为 “板报废”。​一、PCB 隐性故障核心成因…...

Veo 2提示词性能瓶颈诊断:基于1726组AB测试的token敏感度热力图与阈值红线预警

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Veo 2提示词编写最佳实践总览 Veo 2 是 Google 推出的高性能视频生成模型&#xff0c;其对提示词&#xff08;prompt&#xff09;的语义精度、结构清晰度和上下文控制能力高度敏感。高质量提示词并非简单堆砌关…...

论文润色深度测评:GPT-5.5 + Gemini 3.1 Pro:教你学会1+1>2的论文润色方法

各位同仁好,我是七哥。一个在高校里从事人工智能相关领域研究,钻研用大模型AI实操的学术人。可以和七哥交流学术写作或Gemini、GPT、Claude等大模型学术实操相关问题,多多交流,相互成就,共同进步。 2026年的科研圈,AI工具的选择已经从有没有变成了强不强,七哥评测了GPT…...

如何在浏览器中一键解密所有加密音乐文件:Unlock-Music完全指南

如何在浏览器中一键解密所有加密音乐文件&#xff1a;Unlock-Music完全指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地…...

全球无障碍宣传日:iOS 26 辅助功能大升级,这些实用小功能你用过吗?

辅助功能发展与升级很多人对辅助功能的印象还停留在 "小白点"&#xff0c;但随着 iPhone 进入全面屏时代&#xff0c;它逐渐变得陌生。实际上&#xff0c;Apple 每年都会为其增添功能&#xff0c;方便身体有障人士使用 iPhone。而且&#xff0c;这些功能不仅惠及有障…...

告别鼠标点击,微博图片批量下载的轻松方案

告别鼠标点击&#xff0c;微博图片批量下载的轻松方案 【免费下载链接】weiboPicDownloader Download weibo images without logging-in 项目地址: https://gitcode.com/gh_mirrors/we/weiboPicDownloader 还记得那个周末的下午吗&#xff1f;你喜欢的博主发布了九宫格美…...

UE4SS终极指南:从零开始掌握虚幻引擎脚本系统

UE4SS终极指南&#xff1a;从零开始掌握虚幻引擎脚本系统 【免费下载链接】RE-UE4SS Injectable LUA scripting system, SDK generator, live property editor and other dumping utilities for UE4/5 games 项目地址: https://gitcode.com/gh_mirrors/re/RE-UE4SS UE4S…...

对比不同模型在创意生成任务中的效果与token消耗差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比不同模型在创意生成任务中的效果与token消耗差异 在为一场创意大赛准备素材时&#xff0c;我们面临一个常见的选择&#xff1a…...

Lovable内部工具开发方法论(从需求黑洞到用户自发推广的完整闭环)

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Lovable内部工具开发方法论&#xff08;从需求黑洞到用户自发推广的完整闭环&#xff09; Lovable 方法论的核心不是交付功能&#xff0c;而是培育“工具依赖感”——当一线工程师在凌晨三点调试线上问题时&am…...