当前位置：首页 > news >正文

Vue基础(18)_收集表单数据

news 来源：原创 2025/6/29 12:44:01

收集表单数据：

若：<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：输入的首位空格过滤。

示例：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><script type="text/javascript" src="../js/vue.js"></script><title>收集表单数据</title>
</head><body><form id="root" @submit.prevent = "demo"><!-- .trim 去掉前后空格=--><label>账号：<input type="text" v-model.trim="userInfo.account"></label><br><label>密码：<input type="password" v-model="userInfo.password"></label><br><!-- type="number" 输入为数值类型。  -model.number收集数据为数值类型，而不是字符类型。-->年龄：<input type="number" v-model.number="userInfo.age"><br>性别：<label>男<input type="radio" name="gender" value="male" v-model="userInfo.gender"></label><label>女<input type="radio" name="gender" value="female" v-model="userInfo.gender"></label><br>爱好:<input type="checkbox" value="game" v-model="userInfo.hobby">游戏<input type="checkbox" value="study" checked v-model="userInfo.hobby">学习<input type="checkbox" value="Hiking" v-model="userInfo.hobby">徒步<br>所属校区：<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangdong">广东</option><option value="jiangxi">江西</option></select><br>其他信息：<textarea cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br><!-- 不收集value值，返回true或false --><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://www.baidu.com/">《用户协议》</a><br><button type="submit">提交</button></form><script>new Vue({el: '#root',data: {userInfo: {account: '',password: '',age: '',gender: '',hobby: [],city: '',other: '',agree: ''}},methods:{demo(){console.log(JSON.stringify(this.userInfo))}}})</script>
</html>