<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!--prevent 阻止默认事件-->
<form action="/login" @submit.prevent="submit">
用户名: <input type="text" v-model="username"> <br>
密码: <input type="password" v-model="password"> <br>
性别: <input type="radio" id="male" name="sex" v-model="sex" value="male"> <label for="male">男</label>
<input type="radio" id="female" name="sex" v-model="hobby" value="female"> <label for="female">女</label> <br>
爱好: <input type="checkbox" id="basket" v-model="hobby" value="basket"> <label for="basket"> 篮球 </label>
<input type="checkbox" id="foot" v-model="hobby" value="foot"> <label for="foot">足球</label>
<input type="checkbox" id="pp" v-model="hobby" value="pp"> <label for="pp"> 乒乓球 </label> <br>
城市: <select name="" id="city" v-model="city">
<option value="未选择">未选择</option>
<option value="sh">sh</option>
<option value="wh">wh</option>
<option value="gd">gd</option>
</select> <br>
<textarea name="" id="text" cols="30" rows="10" v-model="desc"></textarea> <br>
<input type="submit">
</form>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
username: '',
password:'',
sex: 'male',
hobby:[],
city:'gd',
desc:''
},
methods:{
submit(){
console.log(this.username, this.password, this.sex, this.hobby, this.city, this.desc)
}
},
})
</script>
</body>
</html>
