vue 动态表单

<template>
  <div>
    <h1>动态表单示例</h1>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index">
        <label :for="field.id">{{ field.label }}</label>
        <input
          :id="field.id"
          v-model="field.value"
          :type="field.type"
          :placeholder="field.placeholder"
        />
      </div>
      <button type="submit">提交</button>
    </form>
    <pre>{{ formData }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        {
          id: 'name',
          label: '姓名',
          value: '',
          type: 'text',
          placeholder: '请输入您的姓名'
        },
        {
          id: 'email',
          label: '邮箱',
          value: '',
          type: 'email',
          placeholder: '请输入您的邮箱'
        }
      ]
    };
  },
  computed: {
    formData() {
      const data = {};
      this.fields.forEach(field => {
        data[field.id] = field.value;
      });
      return data;
    }
  },
  methods: {
    handleSubmit() {
      console.log('表单数据:', this.formData);
      // 在这里可以进行表单提交的逻辑，例如发送到服务器
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明

1. 模板部分 (<template>):

   • 使用 v-for 指令遍历 fields 数组，动态生成表单项。
   • 每个表单项包含一个 label 和一个 input，通过 v-model 实现双向绑定。
   • 提交按钮绑定 @submit.prevent 事件，防止默认表单提交行为。

2. 脚本部分 (<script>):

   • data 函数返回一个对象，包含 fields 数组，每个字段有 id, label, value, type, 和 placeholder 属性。
   • computed 中定义了 formData 计算属性，将 fields 数组转换为键值对形式的对象，便于处理表单数据。
   • methods 中定义了 handleSubmit 方法，在提交表单时调用，可以在此方法中处理表单提交逻辑（如发送到服务器）。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加样式，scoped 属性确保样式仅应用于当前组件。