<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
<!-- //收集value值 -->
<form action="">
用户名：<input type="text" placeholder="请输入用户名" v-model="userInfo.username">
密码：<input type="password" placeholder="请输入用户名" v-model="userInfo.password">
<br>
<!-- //单选框， -->
性别：
<input type="radio" name="sex" value="male" v-model="userInfo.gender">男
<input type="radio" name="sex" value="female" v-model="userInfo.gender">女
<br>
<!-- 多选框 -->
爱好：
🏀<input type="checkbox" value="basketball" v-model="userInfo.fav">
⚽<input type="checkbox" value="football" v-model="userInfo.fav">
🏓<input type="checkbox" value="pingpang" v-model="userInfo.fav">
<br>
城市：
<select v-model="userInfo.cityId">
<!-- select 收集的数据是选中的选项的value值 -->
<option :value="city.id" v-for="(city, index) in cities" :key="city.id">{{city.name}}</option>
</select>
<br>
<br>
<br>
<br>
自我简介：
<textarea v-model="userInfo.des"></textarea>
<br>
<!-- 阻止默认行为 ，form表单中，默认button是提交跳转，需要阻止默认事件 -->
<button @click.prevent="submit">提交</button>
</form>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#root',
data() {
return {
cities: [
{ id: 1, name: '北京' },
{ id: 2, name: '上海' },
{ id: 3, name: '深圳' },
],
userInfo: {
username: '',
password: '',
gender: '',
//必须用数组来初始化，多选框
fav: [],
cityId: '',
des: ''
}
}
},
})
</script>
</body>
</html>
