vue3动态增加表单

Vue 3 中动态增加表单元素可以通过多种方式实现，其中一种常见的方法是利用 Vue 的响应式系统和条件渲染。以下是一个简单示例：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(item, index) in formFields" :key="index">
        <input type="text" v-model="item.value" />
        <button type="button" @click="removeField(index)">Remove</button>
      </div>
      <button type="button" @click="addField">Add Field</button>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

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

export default {
  setup() {
    const formFields = ref([{ value: '' }]);
    const addField = () => {
      formFields.value.push({ value: '' });
    };
    const removeField = (index) => {
      formFields.value.splice(index, 1);
    };
    const handleSubmit = (e) => {
      e.preventDefault();
      console.log(formFields.value);
    };

    return {
      formFields,
      addField,
      removeField,
      handleSubmit
    };
  }
};
</script>

在这个例子中，我们使用了 `v-for` 指令来渲染一个动态列表，其中每个表单项都是通过一个数组来管理的。`formFields` 是一个响应式的数组，每个元素是一个对象，包含了表单的值。我们可以使用 `addField` 函数来向数组中添加新的空表单项，使用 `removeField` 函数来根据索引删除表单项。此外，我们还有一个 `handleSubmit` 函数来处理表单的提交事件。

通过上述方式，可以灵活地在运行时添加或删除表单字段，实现动态表单的效果。