vue elementui点击按钮新增输入框(点多少次就新增多少个输入框,无限新增)

效果如图:

核心代码:

javascript 复制代码
        <div v-for="(item,index) in arrayData" :key="item.id">
        //上面这个是关键代码,所有思路靠这个打通
          <el-input
            type="input"  //除了输入框,还有textarea等
            placeholder="请填写测试需求"
            v-model="item.data" //这里是要再input中显示的值
          >
          </el-input>
           <el-button type="danger" @click="delete(item,index)">-</el-button>
        </div>
        <el-button type="primary" @click="add">+</el-button>
javascript 复制代码
		data(){
			return {
				arrayData:[
					{
						id:"",
						data:""
					}
				],
				dataNum:0	
			}
		}
		methods:{
		    delete(item,index){
		        if(this.arrayData.length<=1){//如果只有一个输入框则不可以删除
		          return false
		        }
		        this.arrayData.splice(index,1)//删除了数组中对应的数据也就将这个位置的输入框删除
		    },
		    add(item){
		        this.arrayData.push(//增加就push进数组一个新值
		          {
		            id:this.dataNum++,
		            data:''
		          }
		        )
		    },
		}
相关推荐
好学且牛逼的马7 分钟前
ES6 核心语法精讲
前端·ecmascript·es6
GISer_Jing9 分钟前
一次编码,七端运行:Taro多端统一架构深度解析与电商实战
前端·aigc·taro
michael_ouyang24 分钟前
IM 消息收发流程方案选型
前端·websocket·网络协议·typescript·electron
Y淑滢潇潇27 分钟前
WEB 作业 三个练习题
前端·javascript·css3
静小谢30 分钟前
前端mock假数据工具JSON Server使用笔记
前端·笔记·json
敲上瘾37 分钟前
用Coze打造你的专属AI应用:从智能体到Web部署指南
前端·人工智能·python·阿里云·aigc
EndingCoder1 小时前
性能优化:类型系统的最佳实践
linux·前端·javascript·ubuntu·性能优化·typescript
毕设源码-朱学姐1 小时前
【开题答辩全过程】以 基于web的生鲜农产品信息管理系统为例,包含答辩的问题和答案
前端
Hello.Reader1 小时前
Flink 2.0 从 flink-conf.yaml 到 config.yaml 的正确打开方式(含迁移与最佳实践)
java·前端·flink
晚霞的不甘1 小时前
Flutter for OpenHarmony:注入灵魂:购物车的数据驱动与状态管理实战
android·前端·javascript·flutter·前端框架