uniapp 通过按钮增加和删除input框
时间: 2023-08-08 15:12:42 浏览: 148
你可以使用v-for指令和一个数组来实现动态添加和删除input框。
首先,你需要在data中定义一个数组,用来存储input框的数量:
```
data() {
return {
inputList: [1]
}
}
```
然后,在页面中使用v-for指令,将数组中的每个元素都渲染成一个input框:
```
<template>
<div>
<div v-for="(item, index) in inputList" :key="index">
<input type="text">
</div>
<<button @click="addInput">添加</button>
<button @click="removeInput">删除</button>
</div>
</template>
```
接下来,你需要在methods中定义两个方法,用来增加和删除input框:
```
methods: {
addInput() {
this.inputList.push(1);
},
removeInput() {
if(this.inputList.length > 1) {
this.inputList.pop();
}
}
}
```
点击“添加”按钮,可以调用addInput方法,将一个元素添加到数组中,从而增加一个input框。点击“删除”按钮,可以调用removeInput方法,将数组中的最后一个元素删除,从而删除最后一个input框。需要注意的是,删除操作只有在数组中至少存在一个元素时才能执行。