<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>收集表单数据</title>
<script type="text/javascript" src="./vuebasic/vue.js"></script>
<style>
#root{
width:242px;
margin:0 auto;
}
</style>
</head>
<body>
<!--v-model配合着不同类型的表单的使用方式-->
<div id="root">
<form @submit.prevent="demo">
<label for="username" >账号:</label>
<input id="username" type="text" placeholder="请输入账号" v-model="user.userName"/><br/>
<label for="pwd">密码:</label>
<input id="pwd" type="password" placeholder="请输入密码" v-model="user.userPwd"/><br/>
<label for="money">存款:</label>
<!--当需要的是数字的类型的话,那么需要使用v-model.number-->
<input id="money" type="number" placeholder="请输入存款" v-model.number="user.money"/><br/>
性别:<input type="radio" name='gender' v-model="user.gender" value="man"/>男
<input type="radio" name='gender' v-model="user.gender" value="woman"/>女<br/>
爱好:<input type="checkbox" v-model="user.hobby" value="game"/>游戏
<input type="checkbox" v-model="user.hobby" value="run"/>跑步
<input type="checkbox" v-model="user.hobby" value="read"/>读书<br/>
所属地区:
<select v-model="user.province">
<option value="">请选择地区</option>
<option value="beijing" >北京</option>
<option value="shanghai" >上海</option>
<option value="chongqing" >重庆</option>
<option value="guangzhou" >广州</option>
</select>
<br/><br/>
意见:
<textarea v-model="user.mess"></textarea>
<br/><br/>
<button>确定</button>
</form>
</div>
<script>
Vue.config.productTip = false// 阻止启动时候提示生产错误
new Vue({
el:'#root',
data:{
user:{
userName:'',
userPwd:'',
gender:'man',
// 多选要写数组切记
hobby:[],
province:'chongqing',
mess:'',
money:''// 存储字段
}
},
methods:{
demo(){
console.log(JSON.stringify(this.user))
}
}
})
</script>
</body>
</html>