Vue 收集表单数据详细解释「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」今天来详细

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

今天来详细解释Vue 收集表单的数据，说到数据我们就想到要使用v-model ，双向数据绑定，技能收集用户输入数据，又能想页面传入数据

那么我们下面就来做一个简单的表单介绍vue是如何收集数据的

1.首先我们使用html编写一个简单的表单，有输入框，单选框，多选框，密码框，下拉框，文本框，以及按钮

<form id="root" @submit.prevent='dome'>
        账号:<input type="text" v-model.trim="account">
        <!-- trim 控制vue不收集空格 -->
        <br><br>
        密码:<input type="password" v-model="password">
        <br><br>
        年龄:<input type="number" v-model.number="age">
        <!-- number html中控制只能输入数字，vue中控制只能接收数字 -->
        性别:
        男<input type="radio" name="sex" value="man" v-model="sex">
        女<input type="radio" name="sex" value="woman" v-model="sex">
        <br><br>
        爱好:
        学习<input type="checkbox" v-model="hobby" value="study">
        打游戏<input type="checkbox" v-model="hobby" value="play">
        吃饭<input type="checkbox" v-model="hobby" value="eat">
        <br><br>
        所属学校:
        <select v-model="school">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
            <option value="wuhan">武汉</option>
        </select>
        <br><br>
        其他信息:
        <textarea cols="30" rows="5" v-model.lazy="other"></textarea>
        <!-- lazy修饰符 控制页面失去焦点后收集信息 -->
        <br><br>
        <input type="checkbox" v-model="gree">阅读并接受<a href="http://baidu.com">《用户协议》</a>
        <button>提交</button>
    </form>
复制代码

看到这里，有没有对value值疑惑的小伙伴。我们对不同的选择框设置不同的value值，是因为Vue默认v-model 双向数据绑定，那么如果不设置value值，Vue识别到的就同时识别到多个选择框，影响数据收集。

性别:
        男<input type="radio" name="sex" value="man" v-model="sex">
        女<input type="radio" name="sex" value="woman" v-model="sex">
复制代码

比如说在这里，如果我们不设置value值，那么当你点击男选项时Vue就会自动识别但sex，而sex绑定了男，女两个选项，就会导致同时勾选两个选项。设置value值后Vue会自动识别不同选项的不同value值从而获取到精确的数据。

2.接着我们在Vue中创建相应的对象，获取页面的数据内容

data:{
            account:'',
            password:'',
            sex:'',
            hobby:[],
            school:'beijing',
            other:'',
            gree:'',
            age:[]
        }
复制代码

这里hobby我们创建为数组，原因是初始值会影响收集回来的值，如果为字符串，只会读一个checked

3.下面做数据的接收

methods: {
            dome(){
                console.log(JSON.stringify(this._data))
            }
        }
复制代码

因为我们的数据储存在data中所以我们直接从data中获取

4.这里在讲解三个Vue修饰符（1）lazy 失去焦点再收集数据

其他信息:
        <textarea cols="30" rows="5" v-model.lazy="other"></textarea>
复制代码

我们知道Vue收集数据是时时的，但是如果我们希望在用户输入完成后收集，就可以在后面加上lazy，即如上在文本框失去焦点后Vue再收集数据。

（2）trim：捕收集空格

这个修饰符是控制Vue不收集空字符串，比如在密码框中可以设置默认不收集空字符串。

（3）number：输入字符串转为有效数字

年龄:<input type="number" v-model.number="age">
复制代码

有了number这个修饰符Vue在收集电话号码或者年龄时就不会担心收集到非number值。

本章总结：

收集表单：

若： . 则v-model 收集的是value值，用户输入就是value值。

若： . 则v-model 收集的是value值，且给标签配置value值。

若： 1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.v-model的初始值是数组，那么收集的就是value组成的数组

备注： v-model 的三个修饰符：

lazy：失去焦点在收集数据

trim：捕收集空格

number：输入字符串转为有效数字

Vue 收集表单数据 详细解释

本章总结：

Vue 收集表单数据详细解释