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:''
		          }
		        )
		    },
		}
相关推荐
wuhen_n1 小时前
Promise与async/await
前端
LYFlied1 小时前
前端路由核心原理深入剖析
前端
用户19017684478651 小时前
vue3规范化示例
前端
用户19017684478651 小时前
Git分支管理与代码合并实践:保持特性分支与主分支同步
前端
没有鸡汤吃不下饭1 小时前
前端打包出一个项目(文件夹),怎么本地快速启一个服务运行
前端·javascript
liusheng1 小时前
Capacitor + React 的 iOS 侧滑返回手势
前端·ios
CUYG1 小时前
v-model封装组件(定义 model 属性)
前端·vue.js
子洋2 小时前
基于远程开发的大型前端项目实践
运维·前端·后端
用户35020158847482 小时前
基于react-routet v7 的配置式 + 约定式路由系统 第一步:引入react-routerv7
前端
用户35020158847482 小时前
基于react-routet v7 的配置式 + 约定式路由系统 第二步:一个简单的约定式路由系统
前端