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

效果如图:
在这里插入图片描述
核心代码:

        <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>
		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:''
		          }
		        )
		    },
		}


最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-13 13:02:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-13 13:02:02       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-13 13:02:02       87 阅读
  4. Python语言-面向对象

    2023-12-13 13:02:02       96 阅读

热门阅读

  1. HTB Ouija

    2023-12-13 13:02:02       50 阅读
  2. JRT实现Cache的驱动

    2023-12-13 13:02:02       70 阅读
  3. go标记omitempty的含义

    2023-12-13 13:02:02       55 阅读
  4. c++基于流文件输入输出的综合程序设计

    2023-12-13 13:02:02       59 阅读
  5. 你在地铁上修过bug吗?

    2023-12-13 13:02:02       63 阅读
  6. reactHooks之useDeferredValue

    2023-12-13 13:02:02       69 阅读
  7. 12.12每日一题(备战蓝桥杯循环输出)

    2023-12-13 13:02:02       47 阅读
  8. 总结MySQL 的一些知识点:MySQL 运算符

    2023-12-13 13:02:02       69 阅读
  9. Windows安装卸载MySQL

    2023-12-13 13:02:02       81 阅读
  10. adb的使用

    2023-12-13 13:02:02       52 阅读
  11. 【python】PDF转长图

    2023-12-13 13:02:02       72 阅读