06-Vue收集表单数据

谁践踏了优雅 2024-05-03 14:33 53阅读 0赞

![在这里插入图片描述][e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]

#### 文章目录 ####

*  前言
 *  收集表单数据

## 前言 ##

> ?前言?  
> ?博客：【无聊大侠hello word】?  
> ✍有一点思考，有一点想法，有一点理性！✍  
> ✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍

## 收集表单数据 ##

示例：

<body>
        <div id="app">
            <form @submit.prevent="registUser">
                账号：<input type="text" v-model.trim="account"><br>
                密码：<input type="password" v-model="password"><br>
                年龄：<input type="number" v-model.number="age"><br>
                性别：
                男<input type="radio" name="sex" value="male" v-model="sex">
                女<input type="radio" name="sex" value="female" v-model="sex"><br>
                爱好：
                学习<input type="checkbox" name="hobby" v-model="hobby" value="study">
                打游戏<input type="checkbox" name="hobby" v-model="hobby" value="playGame">
                吃饭<input type="checkbox" name="hobby" v-model="hobby" value="eat">
                <br>
                地址：
                <select v-model="city">
                    <option value="">---请选择---</option>
                    <option value="bj">北京</option>
                    <option value="wh">武汉</option>
                    <option value="zz">郑州</option>
                    <option value="sz">深圳</option>
                </select>
                <br>
                其他信息：
                <textarea v-model.lazy="other"></textarea>
                <br>
                <input type="checkbox" v-model="agree"> 阅读并接受<a href="https://www.baidu.com">《用户协议》</a> 
                <br>
                <button>提交</button>
            </form>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
          
            el: '#app',
            data: {
          
                account: '',
                password: '',
                age: '',
                sex: 'female',
                hobby: [],
                city: '',
                other: '',
                agree: ''
            },
            methods: {
          
                registUser() {
          
                    console.log(JSON.stringify(this._data));
                }
            }
        });
    </script>

如果是`<input type='text' />`，则v-model收集的是`value`值，用户输入的就是value值。

如果是`<input type='radio' />`，则v-model收集的是`value`值，需要给标签配置value属性。

如果是`<input type='checkbox' />`，会有不同情况：

1.  如果没有配置`value`属性，那么收集的就是`checked`（这一组复选框是否勾选，是布尔值）
2.  如果设置了`value`属性，根据`v-mode`l绑定的变量的初始值不同而有不同的结果：
    
    a. `v-mode`l绑定变量的初始值是字符串或布尔等非数组类型，那么收集的就是`checked`
    
    b. `v-mode`l绑定变量的初始值是数组，那么收集的就是value组成的数组

`v-model`有三个修饰符：

*  `.lazy`：输入框失去焦点时，vue才会收集输入的数据
 *  `.number`：输入的字符串转换为有效的数字
 *  `.trim`：去除首位空格

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**

[e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/2186ef6a4b0d4465b9c0c291c9cd8bfb.gif