Vue 2.x – 收集表单数据
若:<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="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入Vue --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="root"> <form @submit.prevent="demo"> 账号:<input type="text" v-model.trim="userInfo.account"><br> 密码:<input type="password" v-model="userInfo.password"><br> 年龄:<input type="number" v-model.number="userInfo.age"><br> 性别: 男<input type="radio" name="sex" value="male" v-model="userInfo.sex"> 女<input type="radio" name="sex" value="female" v-model="userInfo.sex"><br> 爱好: 学习<input type="checkbox" v-model="userInfo.hobby" value="study"> 打游戏<input type="checkbox" v-model="userInfo.hobby" value="game"> 吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"> <br> 所属校区: <select v-model="userInfo.city"> <option value="">请选择校区</option> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> <option value="wh">武汉</option> </select><br> 其他信息: <textarea v-model.lazy="userInfo.other"></textarea><br> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="">《用户协议》</a><br> <button>提交</button> </form> </div> <script> new Vue({ el: '#root', data: { userInfo: { account: '', password: '', sex: '', hobby: [], city: '', other: '', agree: '', age: '' } }, methods: { demo() { console.log(JSON.stringify(this.userInfo)); } }, }) </script> </body> </html>
版权声明:
作者:Ne-21
链接:https://blog.gocos.cn/archives/111.html
来源:云淡风轻
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
海报
Vue 2.x – 收集表单数据
若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。
若:<input type="radio"/>,则v-model收集……

共有 0 条评论