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：输入首尾空格过滤
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。