用vue写一个自定义表单

好的，下面是一个简单的示例：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div v-for="(field, index) in fields" :key="index">
        <label :for="field.key">{{ field.label }}</label>
        <input :type="field.type" :id="field.key" :name="field.key" v-model="form[field.key]">
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      fields: [
        {
          key: 'name',
          label: '名字',
          type: 'text'
        },
        {
          key: 'email',
          label: '邮箱',
          type: 'email'
        },
        {
          key: 'password',
          label: '密码',
          type: 'password'
        }
      ]
    };
  },
  methods: {
    submitForm() {
      console.log(this.form); // 在这里可以获取所有表单数据
    }
  }
};
</script>

在这个示例中，我们先定义了一个 `fields` 数组，其中包含了所有的表单字段。然后我们在模板中循环遍历这个数组，并使用 `v-for` 指令渲染出每一个字段的标签和输入框。输入框的值通过 `v-model` 指令与 `form` 对象中对应的属性进行双向绑定。

最后，我们在表单中添加了一个提交按钮，并使用 `@submit.prevent` 指令监听表单提交事件，在方法中可以获取到所有表单数据。