使用v-model指合实现表单控件的数据绑定，完成用户注册信息的填写和显示功能,其中包括对爱好的全选，反选和全不选，选择擅长技术，可选职位，已选职位，提交及取消按钮

<template>
<div>
<h2>用户注册</h2>
<form>
<label>
姓名：
<input type="text" v-model="userName" />
</label>
<br />
<label>
年龄：
<input type="number" v-model.number="userAge" />
</label>
<br />
<label>
性别：
<input type="radio" value="男" v-model="userGender" />男
<input type="radio" value="女" v-model="userGender" />女
</label>
<br />
<label>
职业：
<select v-model="userJob">
<option value="" disabled>请选择</option>
<option value="前端开发">前端开发</option>
<option value="后端开发">后端开发</option>
<option value="测试工程师">测试工程师</option>
<option value="UI设计师">UI设计师</option>
</select>
</label>
<br />
<label>
爱好：
<input type="checkbox" value="篮球" v-model="userHobbies" />篮球
<input type="checkbox" value="足球" v-model="userHobbies" />足球
<input type="checkbox" value="游泳" v-model="userHobbies" />游泳
<input type="checkbox" value="健身" v-model="userHobbies" />健身
</label>
<br />
<label>
擅长技术：
<textarea v-model="userSkill"></textarea>
</label>
<br />
<button @click.prevent="submitForm">提交</button>
<button @click.prevent="cancelForm">取消</button>
</form>
<div>
<h2>用户信息</h2>
<p>姓名：{{ userName }}</p>
<p>年龄：{{ userAge }}</p>
<p>性别：{{ userGender }}</p>
<p>职业：{{ userJob }}</p>
<p>爱好：{{ userHobbies }}</p>
<p>擅长技术：{{ userSkill }}</p>
</div>
</div>
</template>

<script>
export default {
data() {
return {
userName: '',
userAge: null,
userGender: '',
userJob: '',
userHobbies: [],
userSkill: '',
}
},
methods: {
selectAll() {
this.userHobbies = ['篮球', '足球', '游泳', '健身']
},
selectNone() {
this.userHobbies = []
},
selectReverse() {
const allHobbies = ['篮球', '足球', '游泳', '健身']
this.userHobbies = allHobbies.filter(
(hobby) => !this.userHobbies.includes(hobby)
)
},
submitForm() {
// 提交表单数据
},
cancelForm() {
// 取消表单填写
},
},
}
</script>