vue动态添加多个表单

您可以使用 Vue 动态添加多个表单的方法如下：

1. 在 Vue 实例中创建一个表单对象数组，用于存储动态添加的表单数据。

2. 在模板中使用 `v-for` 指令遍历表单对象数组，动态生成表单。

3. 在表单中使用 `v-model` 指令绑定表单数据，实现表单数据的双向绑定。

4. 提供一个按钮或其他交互元素，用于触发添加表单的操作。

5. 在添加表单的方法中，将一个新的表单对象添加到表单对象数组中，Vue 会自动重新渲染模板，生成新的表单。

下面是一个简单的示例代码：

<template>
  <div>
    <div v-for="(form, index) in forms" :key="index">
      <input v-model="form.name" type="text" placeholder="Name">
      <input v-model="form.email" type="email" placeholder="Email">
    </div>
    <button @click="addForm">Add Form</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      forms: [
        { name: '', email: '' }
      ]
    };
  },
  methods: {
    addForm() {
      this.forms.push({ name: '', email: '' });
    }
  }
};
</script>

该示例中，我们使用 `v-for` 指令遍历 `forms` 数组，动态生成表单。使用 `v-model` 指令绑定表单数据，实现表单数据的双向绑定。提供一个按钮 `Add Form`，用于触发添加表单的操作。在添加表单的方法 `addForm` 中，我们将一个新的表单对象添加到表单对象数组中。