vue3实现动态添加form表单

在Vue3中实现动态添加form表单可以通过以下步骤完成：

1. 在模板中定义一个表单，使用v-for指令循环渲染表单项，同时绑定一个唯一的key值，方便后续操作。

2. 定义一个data属性，用于存储表单数据，可以使用数组来存储多个表单项的数据。

3. 定义一个方法，用于添加表单项，该方法会向表单数据数组中push一个空对象，用于存储新增表单项的数据。

4. 定义一个方法，用于删除表单项，该方法会根据索引值从表单数据数组中删除对应的表单项数据。

下面是一个示例代码，演示如何在Vue3中实现动态添加form表单：

<template>
  <div>
    <form>
      <div v-for="(item, index) in formItems" :key="index">
        <label>姓名：</label>
        <input type="text" v-model="item.name">
        <label>年龄：</label>
        <input type="text" v-model="item.age">
        <button type="button" @click="removeFormItem(index)">删除</button>
      </div>
    </form>
    <button type="button" @click="addFormItem">新增购房人基本信息</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      formItems: [{ name: '', age: '' }]
    });

    const addFormItem = () => {
      state.formItems.push({ name: '', age: '' });
    };

    const removeFormItem = (index) => {
      state.formItems.splice(index, 1);
    };

    return {
      formItems: state.formItems,
      addFormItem,
      removeFormItem
    };
  }
};
</script>