写一个 vuejs 动态生成input框的组件

A：

下面是一个基本的 vuejs 组件，它可以动态生成输入框：

<template>
  <div>
    <button @click="addInput">Add Input</button>
    <div v-for="(input, index) in inputs" :key="index">
      <input :name="input.name" :placeholder="input.placeholder">
      <button @click="removeInput(index)">Remove Input</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputs: [
        { name: "input1", placeholder: "Input 1" },
        { name: "input2", placeholder: "Input 2" }
      ]
    };
  },
  methods: {
    addInput() {
      this.inputs.push({
        name: `input${this.inputs.length + 1}`,
        placeholder: `Input ${this.inputs.length + 1}`
      });
    },
    removeInput(index) {
      this.inputs.splice(index, 1);
    }
  }
};
</script>

在这个组件中，我们使用一个按钮来添加新的输入框，使用 `v-for` 指令循环渲染所有的输入框。我们可以使用 `v-model` 指令来绑定输入框的内容。在 `addInput` 方法中，我们使用 `push` 方法向 `inputs` 数组添加新的输入框对象，同时为每个新输入框分配一个唯一的名称和占位符。`removeInput` 方法可以删除指定位置的输入框。