表单数据收集v-model

首先再开始之前要引入一个vue.js的链接<script type="text/javascript" src="../js/vue.js"></script>这是我自己的，你们要使用可以去网上直接引入网页版的

为了方便观察，这边推荐用vue Devtools谷歌的浏览器插件来观察

接下来将form表单里的input一一列举

<div id="app">
		<form>
			账号：<input type="text"/> <br><br>
			密码：<input type="password"/> <br><br>
			年龄：<input type="number"/> <br><br>
			性别：
			男<input type="radio" name="sex" value="male"/>
			女<input type="radio" name="sex" value="female"/> <br><br>
			爱好：
			看小说<input type="checkbox" value="txtbooks"/>
			看动漫<input type="checkbox" value="comic"/>
			追剧<input type="checkbox" value="TV play"/> <br><br>
			工作地点：
			<select>
				<option value="">请选择城市</option>
				<option value="taicang">太仓</option>
				<option value="nanjing">南京</option>
				<option value="suzhou">苏州</option>
				<option value="wuxi">无锡</option>
				<option value="zhangjiagang">张家港</option>
			</select> <br><br>
			其他信息：
			<textarea></textarea> <br><br>
			<input type="checkbox"/>阅读并同意<a href="#">《用户协议》</a> <br><br>
			<button>提交</button>
		</form>
		</div>

 然后在script中创建vue实例，如图，写在userinfo中是因为方便集体输出打印在控制台中

const vm=new Vue({
				el:'#app',
				data:{
					userinfo:{
						account:'',
						password:'',
						sex:'female',
						hobby:[],
						city:'',
						other:'',
						agree:''
					}
				},
})

依次添加v-model

<form>
			<!-- .trim自动过滤不收集左右两边的空格，中间的空格无法过滤 -->
			账号：<input type="text" v-model.trim='userinfo.account'/> <br><br>
			密码：<input type="password" v-model='userinfo.password'/> <br><br>
			<!-- 第一个number是控制输入框里只能输入数字，第二个number是控制输入的数字不是以字符串的形式进行传参 -->
			年龄：<input type="number" v-model.number='userinfo.age'/> <br><br>
			
			<!-- radio选择，要写value值否则显示的输出值就是null -->
			性别：
			男<input type="radio" name="sex" v-model="userinfo.sex" value="male"/>
			女<input type="radio" name="sex" v-model="userinfo.sex" value="female"/> <br><br>
			
			<!-- hobby的初始值会影响checkbox的值，所以要写成数组的形式接收，不能写成字符串形式 -->
			爱好：
			看小说<input type="checkbox" value="txtbooks" v-model="userinfo.hobby"/>
			看动漫<input type="checkbox" value="comic" v-model="userinfo.hobby"/>
			追剧<input type="checkbox" value="TV play" v-model="userinfo.hobby"/> <br><br>
			
			<!--  -->
			工作地点：
			<select v-model="userinfo.city">
				<option value="">请选择城市</option>
				<option value="taicang">太仓</option>
				<option value="nanjing">南京</option>
				<option value="suzhou">苏州</option>
				<option value="wuxi">无锡</option>
				<option value="zhangjiagang">张家港</option>
			</select> <br><br>
			其他信息：
			<!-- .lazy可以控制不实时收集到数据，在失去焦点之后才收集 -->
			<textarea v-model.lazy="userinfo.other"></textarea> <br><br>
			<!-- 这里的checkbox不需要value值，只需要知道是否勾选，故正常写 -->
			<input type="checkbox" v-model="userinfo.agree"/>阅读并同意<a href="#">《用户协议》</a> <br><br>
			<button>提交</button>
		</form>

因为form表单，在点击按钮提交后会刷新页面，故给表单绑定一个提交事件,.prevent阻止表单提交默认刷新事件，在vue里添加一个方法methods，demo里打印在控制台

<form @submit.prevent="demo">

const vm=new Vue({
				el:'#app',
				data:{
					userinfo:{
						account:'',
						password:'',
						sex:'female',
						hobby:[],
						city:'',
						other:'',
						agree:''
					}
				},
				methods:{
					demo(){
						console.log(JSON.stringify(this.userinfo));
					}
				}
			})

在vue开发者工具中显示如图

 控制台中显示如下图

最后总结如下