收集表单数据

mikewanzi002

已于 2022-06-28 16:39:49 修改

阅读量614

点赞数

文章标签：前端

于 2022-06-27 16:18:15 首次发布

本文链接：https://blog.csdn.net/mikewanzi002/article/details/125486278

版权

在上网注册各种应用的时候，都离不开账号的注册，账号注册的信息也就是填写表单的数据都会被收集整理起来。例如用户的账号名称、账号密码、姓名、年龄等。这就涉及到了如何收集表单数据的问题。
在表单中常出现的有如下几种标签

1.<input type="text"/> 文本
2.<input type="password"/>密码
3.<input type="radio"/>单选
4.<input type="checkbox"/>复选
5.<textarea></textarea>多行文本
6.<select></select>选择

获取以上标签中的内容信息都离不开v-model。通过双向绑定将标签中的内容获取到，然后存入到vm实例中的data中。具体操作如下所示。

<body>
	<div id="root">
		<form @submit.prevent="demo">
			账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
			密码：<input type="password" v-model="userInfo.password"> <br /><br />
			年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
			性别：
			男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
			女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
			喜欢的游戏：
			英雄联盟<input type="checkbox" v-model="userInfo.game" value="英雄联盟">
			王者荣耀<input type="checkbox" v-model="userInfo.game" value="王者荣耀">
			双人成行<input type="checkbox" v-model="userInfo.game" value="双人成行">
			<br /><br />
			常住地
			<select v-model="userInfo.city">
				<option value="">请选择校区</option>
				<option value="beijing">北京</option>
				<option value="shanghai">上海</option>
				<option value="shenzhen">深圳</option>
				<option value="wuhan">武汉</option>
			</select>
			<br /><br />
			其他信息：
			<textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
			<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
			<button>提交</button>
		</form>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#root',
			data: {
				userInfo: {
					account: '',
					password: '',
					age: '',
					sex: '',
					game: [],
					city: 'beijing',
					other: '',
					agree: ''
				}
			},
			methods: {
				demo() {
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</body>

在收集表单数据时注意以下几点：

 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
 若：<input type="checkbox"/>
		1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
		2.配置input的value属性:
				(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
				(2)v-model的初始值是数组，那么收集的的就是value组成的数组
 备注：v-model的三个修饰符：
	    lazy：失去焦点再收集数据
		number：输入字符串转为有效的数字
		trim：输入首尾空格过滤