ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

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

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

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

        <div v-for="(item,index) in arrayData" :key="item.id">//上面这个是关键代码,所有思路靠这个打通<el-inputtype="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:''})},}
返回列表