vue3 div动态添加input

在Vue3中，我们可以使用v-for指令动态地向页面上添加`<input>`元素。假设我们有一个数组或者数据对象，我们需要遍历这个数组并在每次迭代中创建一个新的输入字段。以下是一个简单的例子：

<template>
  <div id="dynamic-inputs">
    <button @click="addInput">点击增加输入</button>
    <div v-for="(item, index) in inputs" :key="index">
      <input type="text" v-model="inputs[index].value">
      <button @click="removeInput(index)">删除输入</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputs: [{ value: '' }] // 初始状态，可以设置成空数组
    };
  },
  methods: {
    addInput() {
      this.inputs.push({ value: '' }); // 新增一个值为空的对象到inputs数组
    },
    removeInput(index) {
      this.inputs.splice(index, 1); // 通过索引从数组中移除元素
    }
  }
};
</script>

在这个例子中，当你点击“点击增加输入”按钮，会新增一个文本输入框，并绑定了`v-model`指令来实时更新对应的值。同样，每个输入框都有一个删除按钮，点击时会根据提供的索引从`inputs`数组中移除对应项。