vue如何实现表单多选并且获取其中的值
作者:web前端 zxp
这篇文章主要介绍了vue如何实现表单多选并且获取其中的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue实现表单多选并且获取其中的值
说明
使用 v-model 指令 结合 name / value 使用
需要你的 data 里面的数据类型为 数组
代码说明
为什么会是 v-model.number ?
这是将它的值固定为 数字类型,否则你获取到的就是字符串
<div id="root"> <input type="checkbox" v-model.number="hobby" name="hobby" value="1">学习 <input type="checkbox" v-model.number="hobby" name="hobby" value="2">游泳 <input type="checkbox" v-model.number="hobby" name="hobby" value="3">下棋 <input type="checkbox" v-model.number="hobby" name="hobby" value="4">乒乓球 <div>{{hobby}}</div> </div> </body> <script> new Vue({ el:"#root", data:{ hobby:[4] //默认的选择第四个,你可以不选默认项 }, }) </script>
它现在的值就是 data 数组中的数据,想要获得数据直接使用这个数组
vue获取表单数据——input、radio、checkbox、select、textarea
获取表单数据(案例)
1.效果
注意:这个案例只是简单的再前端输出获取的表单内容,并没有提交到后台
2.代码
<div class="root"> <form @submit.prevent="demo"> <!-- trim去掉首尾空格,中间的空格去不掉 --> 账号:<input type="text" v-model.trim="userInfo.account"> <br><br> 密码:<input type="text" v-model="userInfo.password"><br><br> <!-- number输入的字符串转换为数字 --> 年龄:<input type="number" v-model.number="userInfo.age"><br><br> 性别: 男<input type="radio" v-model="userInfo.sex" name="sex" value="男"> 女<input type="radio" v-model="userInfo.sex" name="sex" value="女"><br><br> 爱好: 学习<input type="checkbox" v-model="userInfo.hobby" value="学习"> 打游戏<input type="checkbox" v-model="userInfo.hobby" value="打游戏"> 吃饭<input type="checkbox" v-model="userInfo.hobby" value="吃饭"> <br><br> 选择地址: <select v-model="userInfo.city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="深圳">深圳</option> <option value="武汉">武汉</option> </select> <br><br> 其他信息: <!-- lazy失去焦点再获取数据 --> <textarea v-model.lazy="userInfo.other" cols="30" rows="10"></textarea> <br><br> <input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="www.baidu.com" rel="external nofollow" >《用户协议》</a> <button>提交</button> </form> </div>
new Vue({ el: '.root', data() { return { userInfo: { account: '', password: '', sex: '', hobby: [], city: '北京', other: '', agree: '', age: '' } } }, methods: { demo() { //JSON.stringify() 将数据转换为json字符串 console.log(JSON.stringify(this.userInfo)); } }, })
心得
收集表单数据:
1.<input type=“text”/>,则v-model收集的是value值,用户输入的就是value值。
<input type=“radio”/>,则v-model收集的是value值,且要给标签配置value值。
2.<input type=“checkbox”/>没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
3.配置input的value属性:
- (1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
- (2)v-model的初始值是数组,那么收集的的就是value组成的数组
4.备注:v-model的三个修饰符:
lazy
:失去焦点再收集数据number
:输入字符串转为有效的数字trim
:输入首尾空格过滤
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。