效果如图:
核心代码:
<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:''})},}