uni-app 一个提交基本信息的页面，有姓名，单选的性别男女，生日，一个可选的报名，和提交按钮。其中使用v-if指令，点击报名开关显示报名信息表单。报名信息表填家庭住址和选择课程

在Uni-app中创建一个提交基本信息的页面，你可以按照以下步骤设置：

1. **基础元素**:
- 添加输入框(`<input type="text" v-model="name">`)用于接收姓名信息。
- 添加单选按钮组(`<radio-group v-model="gender">`):

     <radio-button label="男" value="male"></radio-button>
     <radio-button label="女" value="female"></radio-button>

- 使用日期选择器(`<date-picker v-model="birthday" placeholder="请选择生日"></date-picker>`)让用户选择生日。

2. **可选项部分**:
- 利用`v-if`指令来控制是否显示报名信息:

     <div v-if="showRegistration">
       <!-- 报名信息表单 -->
       <label>家庭住址:</label>
       <input type="text" v-model="address">

       <label>选择课程:</label>
       <select v-model="selectedCourse">
         <!-- 填充课程选项 -->
       </select>
     </div>

- 创建`showRegistration`变量来切换报名信息的显示与隐藏:

     data() {
       return {
         name: '',
         gender: '',
         birthday: '',
         showRegistration: false, // 默认不显示报名信息
         address: '',
         selectedCourse: ''
       };
     },

3. **提交按钮**:

     <button @click="submitInfo">提交</button>

4. **事件处理器**:
在提交按钮上添加事件监听器，当点击时调用`submitInfo`方法处理表单数据:

     methods: {
       submitInfo() {
         if (this.showRegistration) {
           // 检查表单数据完整并进行必要的验证
           console.log('姓名:', this.name);
           console.log('性别:', this.gender);
           console.log('生日:', this.birthday);
           console.log('家庭住址:', this.address);
           console.log('选择的课程:', this.selectedCourse);
           // 提交数据至后台或其他逻辑操作
         }
       }
     },