<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- @submit.prevent="col"阻止提交 -->
<form action="" @submit.prevent="col">
<!-- 1.在input里面绑定数据模型 2.在data里面注册数据 -->
<span>用户名:</span>
<input type="text" v-model="userName"/><br />
<span>密码:</span>
<input type="password" v-model="psd"/><br />
<span>性别:</span>
<!-- 增加value说明默认情况下选什么 给相同的name值 -->
<input type="radio" id="female" value="女" v-model="sex" name="op"/>
<label for="female">女</label>
<input type="radio" id="male"value="男" v-model="sex"name="op"/>
<label for="male">男</label>
<br />
<span>爱好:</span>
<input type="checkbox" id="basket" v-model="likes"value="basket"/>
<label for="basket">篮球</label>
<input type="checkbox" id="foot" v-model="likes" value="foot"/>
<label for="foot">足球</label>
<input type="checkbox" id="pingpang"v-model="likes"value="pingpang"/>
<label for="pingpang">乒乓球</label><br />
<span>城市:</span>
<select v-model="cityId">
<option value="">未选择</option>
<!-- 要提交的是id值 -->
<option :value="city.id" v-for="(city,index) in allCitys" :key='index'>{{city.name}}</option>
</select><br />
<span>介绍:</span>
<textarea rows="10" v-model="desc"></textarea><br /><br />
<input type="submit" value="注册" />
</form>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
userName:"",
psd:"",
sex:'男',
likes:['foot'],
allCitys:[{id:1,name:'Bj'},{id:2,name:'sh'},{id:3,name:'tj'}],
cityId:'3',
desc:''
},
methods:{
col(){
console.log(this.userName,this.psd,this.sex,this.likes,this.allCitys,this.desc)
}
}
})
</script>
</body>
</html>