如何在Vue中创建动态编辑器窗体组件

<template>
  <div>
    <form>
      <div v-for="field in fields" :key="field.name">
        <label :for="field.name">{{ field.label }}</label>
        <input v-if="field.type === 'text'" type="text" :id="field.name" v-model="field.value">
        <textarea v-else-if="field.type === 'textarea'" :id="field.name" v-model="field.value"></textarea>
        <select v-else-if="field.type === 'select'" :id="field.name" v-model="field.value">
          <option v-for="option in field.options" :value="option.value">{{ option.label }}</option>
        </select>
      </div>
    </form>
    <button @click="saveForm">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        { name: 'name', label: '姓名', type: 'text', value: '' },
        { name: 'email', label: '邮箱', type: 'text', value: '' },
        { name: 'message', label: '留言', type: 'textarea', value: '' },
        { name: 'gender', label: '性别', type: 'select', value: '', options: [
          { label: '男', value: 'male' },
          { label: '女', value: 'female' }
        ]}
      ]
    };
  },
  methods: {
    saveForm() {
      // 处理表单数据，可以发送到服务器保存或进行其他操作
      console.log(this.fields);
    }
  }
};
</script>