当前位置: 首页 > 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…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...