Vue フォーム処理を使用して複雑なフォーム レイアウトを実装する方法

<template>
  <div>
    <FormHeader></FormHeader>
    <FormBody></FormBody>
    <FormFooter></FormFooter>
  </div>
</template>

<script>
import FormHeader from './components/FormHeader.vue';
import FormBody from './components/FormBody.vue';
import FormFooter from './components/FormFooter.vue';

export default {
  components: {
    FormHeader,
    FormBody,
    FormFooter
  }
}
</script>

<template>
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="formData.name">
    
    <label for="age">年龄：</label>
    <input type="number" id="age" v-model="formData.age">
    
    <label for="gender">性别：</label>
    <select id="gender" v-model="formData.gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        gender: ''
      }
    }
  }
}
</script>

<template>
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="formData.name" required>
    <span v-if="!formData.name">姓名不能为空</span>
    
    <label for="age">年龄：</label>
    <input type="number" id="age" v-model="formData.age" min="18" max="60">
    <span v-if="formData.age < 18 || formData.age > 60">年龄必须在18岁到60岁之间</span>
    
    <label for="gender">性别：</label>
    <select id="gender" v-model="formData.gender" required>
      <option value="">请选择</option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <span v-if="!formData.gender">性别不能为空</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        gender: ''
      }
    }
  }
}
</script>