vue使用v-model(双向数据绑定)自动收集表单数据

vue使用v-model(双向数据绑定)自动收集表单数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!--prevent阻止默认行为-->
			<form action="/a" @submit.prevent="sub">
				<span>用户名</span>
				<input type="text" v-model="username"/><br />
				
				<span>密码</span>
				<input type="password" v-model="pwd"/><br />
				
				<span>性别</span>
				<input type="radio" id="nv" value="女" v-model="sex" />
				<label for="nv">女</label>
				<input type="radio" id="nan" v-model="sex" value="男"/>
				<label for="nan">男</label><br />
				
				<span>爱好</span>
				<input type="checkbox" id="lq" value="lq" v-model="hobby"/>
				<label for="lq">篮球</label>
				<input type="checkbox" id="zq" value="zq" v-model="hobby"/>
				<label for="zq">足球</label><br />
				<input type="checkbox" id="ppq" value="ppq" v-model="hobby"/>
				<label for="ppq">乒乓球</label><br />
				
				<span>城市</span>
				<select v-model="cid">
					<option value="" selected="selected">请选择</option>
					<option value="1">郑州</option>
					<option value="2">上海</option>
					<option value="3">北京</option>
				</select>
				<br />
				
				<span>介绍</span>
				<textarea rows="10" v-model="des"></textarea><br /><br />
				
				<input type="submit" name="" id="" value="提交"/>
				
			</form>
		</div>
		<script>
			var v=new Vue({
				el:'#app',
				data:{
					username:'',
					pwd:'',
					sex:'女',
					hobby:['ppq'],
					cid:'',
					des:'sdf'
				},
				methods:{
					sub(){
						console.log(this.cid);
					}
				}
			})
		</script>
	</body>
</html>

fixed

没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。