vue增加和删除多个输入框并获取值

可以使用 Vue 的动态组件和 v-for 指令来实现增加和删除多个输入框，并且可以通过 v-model 指令来获取输入框的值。

首先，在 Vue 实例中定义一个数组，用来存储输入框的值：

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

然后，在模板中使用动态组件和 v-for 指令来创建多个输入框：

<template>
  <div>
    <component v-for="(input, index) in inputs" :key="index" :is="'input-' + index" v-model="inputs[index]" />
    <button @click="addInput">Add Input</button>
    <button @click="removeInput">Remove Input</button>
  </div>
</template>

在上面的模板中，我们使用了组件的动态名称，每个输入框的名称都是 `input-0`, `input-1`, `input-2` 等等。在组件中，我们可以使用 `v-model` 指令来绑定输入框的值：

<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

在组件中，我们使用了 `props` 属性来接收输入框的值，并且在输入框发生变化时，使用 `$emit` 方法来更新输入框的值。

最后，在 Vue 实例中定义 `addInput` 和 `removeInput` 方法，来增加和删除输入框：

methods: {
  addInput() {
    this.inputs.push('')
  },
  removeInput() {
    this.inputs.pop()
  }
}

在 `addInput` 方法中，我们向 `inputs` 数组中添加一个空字符串，这样就会增加一个输入框。在 `removeInput` 方法中，我们从 `inputs` 数组中删除一个元素，这样就会删除最后一个输入框。

这样，我们就完成了增加和删除多个输入框，并且可以通过 `inputs` 数组来获取输入框的值。