使用v-model收集表单数据

最新推荐文章于 2024-08-25 01:40:15 发布

干的漂亮

最新推荐文章于 2024-08-25 01:40:15 发布

阅读量342

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： servlet 前端 java

本文链接：https://blog.youkuaiyun.com/weixin_54671516/article/details/127164420

vue 专栏收录该内容

8 篇文章

订阅专栏

本文总结了在使用v-model收集表单数据时的一些关键细节，特别是在处理单选按钮（<input type='radio'>）和复选框（<input type='checkbox'>）时。未设置value值会导致无法正确获取选中状态。对于单选按钮，需要配置value值；对于复选框，未配置value值时收集的是勾选状态，配置后，v-model初始值非数组时收集的仍是勾选状态，而初始值为数组则收集数组值。v-model还可以配合lazy、number和trim修饰符进行延迟收集、转换数字和去除首尾空格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用v-model收集表单数据需要注意一些细节，本篇就小小总结一下

看代码

<!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.7.10"></script>
</head>

<body>
    <div id="root">
        <form @submit.prevent="demo">

            账号：<input type="text" v-model.trim="account"><br>
            密码：<input type="password" v-model="password"><br>
            性别：
            男：<input type="radio" name="sex" v-model="sex" value="male">
            女：<input type="radio" name="sex" v-model="sex" value="female"><br>
            爱好：
            学习<input type="checkbox" v-model="hobbies" value="study">
            吃饭<input type="checkbox"  v-model="hobbies" value="eat">
            打游戏<input type="checkbox"  v-model="hobbies" value="game"><br>
            所属校区：<select v-model="city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="liuzhou">柳州</option>
            </select><br>
            其他信息：
            <textarea v-model.lazy="other" ></textarea>
            <br>
             <input type="checkbox" v-model="agreen">阅读并接受用户协议<a href="http://www.baidu.com">《用户协议》</a>
             <br>
             <button>提交</button>
        </form>
    </div>
    <script>
        let vm = new Vue({
            el: '#root',
            data: {
                account:'',
                password:'',
                sex:'female',
                hobbies:[],
                city:'beijing',
                other:'',
                agreen:''
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this._data));
                }
            },
        })
    </script>
</body>

</html>

这是完整的实现了功能的代码片段，效果如下

在使用v-model实现双向数据绑定的时候发现

如果性别那部分的代码没有设置value值，即

性别：

男：<input type="radio" name="sex" v-model="sex" >

女：<input type="radio" name="sex" v-model="sex" ><br>

此时的效果是这样的,获取不到勾选的值，所以要在标签上加上value值

如果爱好那部分的代码是没有value值的

爱好：

学习<input type="checkbox" v-model="hobbies" >

吃饭<input type="checkbox" v-model="hobbies" >

打游戏<input type="checkbox" v-model="hobbies" ><br>

效果如下

因此我们要配置一个value值，但是如果有了value值，v-model的初始值不是数组，即

效果如下

当配置有value值的时候，且v-model绑定的值是一个数组的时候可以拿到value的值

效果

小小总结一波：

若：<input type="text">,使用v-model收集的是value的值，用户输入的值就是value值，
若：<input type="radio">,使用v-model收集的值也是value值，但是这个是单选框，没有输入值，所以要给标签配置value值；
若：<input type="checkbox">,使用v-model分为两种情况：（1）没有配置input的value属性，那么收集的就是checked（勾选或者不勾选，是一个布尔值）；（2）配置input的value属性：v-model的初始值不是数组，那么收集的还是checked（勾选或者不勾选，是一个布尔值），如果v-model的初始值是数组，那么收集的就是数组的值
v-model有三个修饰符：lazy：失去焦点在收集数据；number：输入的字符串转为有效数字；trim：输入首尾空格过滤。