vue3中form表单中加行按钮

在Vue3中，可以使用v-for指令和响应式数组来实现表单中动态添加行的功能。以下是一个简单的示例：

1. 在data中定义表单数据和行数组：

data() {
  return {
    form: {
      name: '',
      age: ''
    },
    rows: []
  }
}

2. 在模板中使用v-for指令渲染行，使用v-model绑定数据：

<form>
  <div v-for="(row, index) in rows" :key="index">
    <input v-model="row.name" type="text">
    <input v-model="row.age" type="text">
    <button @click="removeRow(index)">删除</button>
  </div>
</form>

3. 在methods中添加添加行和删除行的方法：

methods: {
  addRow() {
    this.rows.push({ name: '', age: '' })
  },
  removeRow(index) {
    this.rows.splice(index, 1)
  }
}

4. 在模板中添加添加行的按钮：

<button @click="addRow">添加行</button>

这样，点击添加行按钮就可以动态添加新的行了。