<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_ form 表单的自动数据收集</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div id="test">
<form action="javascript:">
<label>
<span>用户名: </span>
<input v-model="user.name" type="text" />
</label><br/><br/><br/> <label>
<span>密码: </span>
<input v-model="user.password" type="text" />
</label><br/><br/><br/> <span>性别: </span>
<label>男
<input v-model="user.gender" name="gender" type="radio" value="boy"/>
</label>
<label>女
<input v-model="user.gender" name="gender" type="radio" value="girl"/>
</label><br/><br/><br/> <span>爱好: </span>
<label>跳水
<input v-model="user.hobby" name="jumpWater" type="checkbox" value="跳水"/>
</label>
<label>滑翔
<input v-model="user.hobby" name="fly" type="checkbox" value="滑翔"/>
</label>
<label>蹦极
<input v-model="user.hobby" name="jumpHeight" type="checkbox" value="蹦极"/>
</label><br/><br/><br/> <span>城市: </span>
<select v-model="user.city">
<option value="BJ">北京</option>
<option value="HN">湖南</option>
<option value="SZ">深圳</option>
<option value="ZJ">浙江</option>
</select><br/><br/><br/> <label>
<span>介绍: </span>
<textarea v-model="user.words" cols="30" rows="2"></textarea>
</label><br/><br/><br/> <label>
<input @click="register" type="submit" value="注册" />
</label> </form>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#test",
data:{
user:{
name: "admin",
gender: "boy",
hobby: ["跳水"],
city: "HN"
}
},
methods:{
register(){
console.log(this.user)
}
}
})
</script>
</body>
</html>