vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue表单多选并获取其中的值

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属性:

4.备注:v-model的三个修饰符:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文