vue增加和删除输入框

你可以使用 Vue 的动态组件和数组来实现增加和删除输入框的功能。具体实现步骤如下：

1. 首先在数据中定义一个空的数组，用于存储输入框的数据。

data() {
  return {
    inputFields: []
  }
}

2. 创建一个方法，用于向 inputFields 数组中添加一个空的输入框数据。

methods: {
  addInputField() {
    this.inputFields.push('')
  }
}

3. 在模板中使用 v-for 指令循环渲染所有的输入框，并通过 v-model 指令绑定每个输入框的值。

<template>
  <div>
    <div v-for="(input, index) in inputFields" :key="index">
      <input v-model="inputFields[index]" type="text">
      <button @click="removeInputField(index)">删除</button>
    </div>
    <button @click="addInputField()">添加输入框</button>
  </div>
</template>

4. 创建一个方法，用于从 inputFields 数组中删除指定位置的输入框数据。

methods: {
  removeInputField(index) {
    this.inputFields.splice(index, 1)
  }
}

这样就可以实现动态增加和删除输入框的功能了。