设计用户注册表单，使用v-model 指合实现表单控件与Vue 实例的相应属 性的双向数据绑定﹐当用户填写信息（或选择）完毕并点击提交按钮﹐程序将用户填写的信 息或选择的结果输出至控制台，或弹窗显示。

<template>
<form @submit.prevent="submitForm">
<label for="username">用户名：</label>
<input type="text" id="username" v-model="username" required>
<br>
<label for="password">密码：</label>
<input type="password" id="password" v-model="password" required>
<br>
<label for="gender">性别：</label>
<select id="gender" v-model="gender" required>
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
<br>
<label for="interests">兴趣爱好：</label>
<input type="checkbox" id="interest1" value="reading" v-model="interests">阅读
<input type="checkbox" id="interest2" value="music" v-model="interests">音乐
<input type="checkbox" id="interest3" value="sports" v-model="interests">运动
<br>
<button type="submit">提交</button>
</form>
</template>

<script>
export default {
data() {
return {
username: '',
password: '',
gender: '',
interests: []
}
},
methods: {
submitForm() {
console.log({
username: this.username,
password: this.password,
gender: this.gender,
interests: this.interests
})
// 或者弹窗显示信息
alert(JSON.stringify({
username: this.username,
password: this.password,
gender: this.gender,
interests: this.interests
}))
}
}
}
</script>