Vue｜获取表单数据

喜欢ヅ旅行 2023-09-25 20:47 52阅读 0赞

![968f4c3a9001403aaa609f4e85ac2933.gif][]

>  **表单用于搜集不同类型的用户输入，Vue针对不同的表单输入类型，也提供了不同的的输入控制及验证。**  
> 精彩专栏持续更新↓↓↓  
> [微信小程序实战开发专栏][Link 1]

####  ####

*  一、获取表单数据
 *   *  1.1 input
     *  1.2 radio
     *  1.3 checkbox
     *  1.4 select
     *  1.5 textarea
     *  1.6 表单提交
     *  1.7 表单修饰符
     *   *  number修饰符
         *  lazy修饰符
         *  trim修饰符

## 一、获取表单数据 ##

> 开始前的准备，在目录下创建文件夹及对应的页面如下

![在这里插入图片描述][d454457cea5a424e9f212d50f06fa3c7.png]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>收集表单数据</title>
        <script src="../js/vue.js" type="text/javascript"></script>
    </head>
    <body>
        
        <div id="root">
        </div>
        <script type="text/javascript">
            //Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
            // 创建vue实例
            const vm = new Vue({
                el:'#root',
                //函数式
                data:function(){
                    return{
                        info:{
                            name:'摔跤猫子',
                        }
                    };
                }
            });
        </script>
    </body>
    </html>

### 1.1 input ###

> 默认类型的input框通过前面几章所介绍的v-model双向绑定即可

![在这里插入图片描述][69cae0ecc10d4bf6a23fc90355fa9c4f.gif]

> 这里再插一个小技巧，当表单的内容为左侧标题及右侧文本框这样的布局组成时，如何实现点击标题光标自动在右侧的文本框选中呢?

![在这里插入图片描述][99cb5c410c38468498862d9463c96992.png]

![d2e222cd9f1848e68a3924b14ba3e126.png][]

> 只需要在左侧标题的label标签中添加一个for的同时指定一个名称，同时在需要选中光标的文本框设置相同的id值即可

![在这里插入图片描述][45242bde274643fea3ebd32f475aa23e.gif]

### 1.2 radio ###

> 在使用radio标签时，需要给input指定其type为radio的同时添加一样的name值，否则无法达到多选一的效果

![在这里插入图片描述][7ece975bdc914a1e9a3ad2ad5d1450b9.png]

> radio标签继续使用v-model双向绑定，但是切换时data中的sex字段并没有数据，这是因为radio类型下的input没有一个入口用于输入，必须给它指定默认的value值

![在这里插入图片描述][672c172110fe448ba7fec8c32bd12275.png]

> 相同的name值以及value值配置好后，即可实现效果

![在这里插入图片描述][2fdb11a645a74817b9a6a2c8b1b547c8.gif]

性别:
    男<input type="radio" v-model="sex" name="sex" value="男" />
    女<input type="radio" v-model="sex" name="sex" value="女" />

### 1.3 checkbox ###

> 使用checkbox时是不是跟上述一样的步骤呢?毕竟用的都是input标签，只不过修改了其type值而已。

年级:
    一年级<input type="checkbox" value="一年级" v-model="grade" />
    二年级<input type="checkbox" value="二年级" v-model="grade" />
    三年级<input type="checkbox" value="三年级" v-model="grade" />

> 梦想是美好的，现实是残酷的，checkbox标签的表现让我们大失所望，不仅获取到的数据类型不对，而且不管是点击三个中的哪一个，他都是一起选中，一起取消，仿佛一个共同体

![在这里插入图片描述][bd7f88a0ffdf4df5821b50c9db050ae2.gif]

> 这是因为在data中年级字段的定义使用的字符类型，这里需要改成数组类型的字段属性，效果就达成了

![在这里插入图片描述][c085890506374a9a814b32d3ab54e30b.gif]  
![在这里插入图片描述][25517c2815c64d42a535501df18eeff3.png]

### 1.4 select ###

> 当使用select标签时，保持v-model标签即可

![在这里插入图片描述][64f7c308c7ca49f097a7a9bee044f777.gif]

班级:
    <select v-model="className">
        <option>请选择班级</option>
        <option>一班</option>
        <option>二班</option>
        <option>三班</option>
    </select>

> 需要让其默认选中，在data中对其字段进行赋值即可

![在这里插入图片描述][38d716fc07764cb68f63921962f5a67e.png]

### 1.5 textarea ###

> textarea文本域标签看着就没有那么多花里胡哨的把式，跟默认的input框一样即可正常获取数据

![在这里插入图片描述][eb3fc9c99f404d52825c57bcea7d3923.gif]

简介:
    <textarea v-model="desc"></textarea>

### 1.6 表单提交 ###

> 表单元素中的数据都能获取到后，如何将其在控制台进行打印输出呢?可以看到如下图，当在form表单中点击按钮时页面会刷新，这是因为提交后默认的动作就是跳转页面

![在这里插入图片描述][140e7620c47b4479b125aad8062cd26f.gif]

> 如何避免页面刷新呢?这里需要给form标签绑定vue中的prevent事件并绑定对应的函数

> 通过在函数中打印this.\_data的方式进行输出

![在这里插入图片描述][fc7be86eea294bf1a5c4af365ae1ae70.png]

> 但是每次取值时都这样去获取\_data，是不太优雅的行为，建议用一个对象将这些字段都装进去，在取值时直接取这个对象

![在这里插入图片描述][ec1c9d8b4ea545ff97bcb3c5b550fe9b.png]

> 这样也要付出相对应的代价，就是在页面上双向绑定的地方都得给它加上对应的前缀

![在这里插入图片描述][96b1ad8e412c46eaa2f2e09052973dcb.png]

### 1.7 表单修饰符 ###

> 在Vue中，修饰符处理了许多DOM事件的细节

#### number修饰符 ####

> number修饰符，对类型进行转换，转为有效的数字，避免提交时的数据带上双引号导致错误

![在这里插入图片描述][d7495eae453242a09830b446fc70f170.gif]

#### lazy修饰符 ####

> 添加lazy修饰符，在失去焦点的一瞬间再获取数据，不是实时获取。少量数据时效果不明显，如果是富文本且需要修改的内容是大量的那效果是很显著的

![在这里插入图片描述][32d956fe308b452ca2201235dd651f63.gif]

#### trim修饰符 ####

> trim顾名思义同时也很常见，去除首尾空格，字符中间的空格无法去除

![在这里插入图片描述][31a752612d6c49c68b99d6058863fbc4.gif]

[968f4c3a9001403aaa609f4e85ac2933.gif]: https://img-blog.csdnimg.cn/968f4c3a9001403aaa609f4e85ac2933.gif
[Link 1]: https://blog.csdn.net/weixin_42794881/category_10483785.html?spm=1001.2014.3001.5482
[d454457cea5a424e9f212d50f06fa3c7.png]: https://img-blog.csdnimg.cn/d454457cea5a424e9f212d50f06fa3c7.png
[69cae0ecc10d4bf6a23fc90355fa9c4f.gif]: https://img-blog.csdnimg.cn/69cae0ecc10d4bf6a23fc90355fa9c4f.gif
[99cb5c410c38468498862d9463c96992.png]: https://img-blog.csdnimg.cn/99cb5c410c38468498862d9463c96992.png
[d2e222cd9f1848e68a3924b14ba3e126.png]: https://img-blog.csdnimg.cn/d2e222cd9f1848e68a3924b14ba3e126.png
[45242bde274643fea3ebd32f475aa23e.gif]: https://img-blog.csdnimg.cn/45242bde274643fea3ebd32f475aa23e.gif
[7ece975bdc914a1e9a3ad2ad5d1450b9.png]: https://img-blog.csdnimg.cn/7ece975bdc914a1e9a3ad2ad5d1450b9.png
[672c172110fe448ba7fec8c32bd12275.png]: https://img-blog.csdnimg.cn/672c172110fe448ba7fec8c32bd12275.png
[2fdb11a645a74817b9a6a2c8b1b547c8.gif]: https://img-blog.csdnimg.cn/2fdb11a645a74817b9a6a2c8b1b547c8.gif
[bd7f88a0ffdf4df5821b50c9db050ae2.gif]: https://img-blog.csdnimg.cn/bd7f88a0ffdf4df5821b50c9db050ae2.gif
[c085890506374a9a814b32d3ab54e30b.gif]: https://img-blog.csdnimg.cn/c085890506374a9a814b32d3ab54e30b.gif
[25517c2815c64d42a535501df18eeff3.png]: https://img-blog.csdnimg.cn/25517c2815c64d42a535501df18eeff3.png
[64f7c308c7ca49f097a7a9bee044f777.gif]: https://img-blog.csdnimg.cn/64f7c308c7ca49f097a7a9bee044f777.gif
[38d716fc07764cb68f63921962f5a67e.png]: https://img-blog.csdnimg.cn/38d716fc07764cb68f63921962f5a67e.png
[eb3fc9c99f404d52825c57bcea7d3923.gif]: https://img-blog.csdnimg.cn/eb3fc9c99f404d52825c57bcea7d3923.gif
[140e7620c47b4479b125aad8062cd26f.gif]: https://img-blog.csdnimg.cn/140e7620c47b4479b125aad8062cd26f.gif
[fc7be86eea294bf1a5c4af365ae1ae70.png]: https://img-blog.csdnimg.cn/fc7be86eea294bf1a5c4af365ae1ae70.png
[ec1c9d8b4ea545ff97bcb3c5b550fe9b.png]: https://img-blog.csdnimg.cn/ec1c9d8b4ea545ff97bcb3c5b550fe9b.png
[96b1ad8e412c46eaa2f2e09052973dcb.png]: https://img-blog.csdnimg.cn/96b1ad8e412c46eaa2f2e09052973dcb.png
[d7495eae453242a09830b446fc70f170.gif]: https://img-blog.csdnimg.cn/d7495eae453242a09830b446fc70f170.gif
[32d956fe308b452ca2201235dd651f63.gif]: https://img-blog.csdnimg.cn/32d956fe308b452ca2201235dd651f63.gif
[31a752612d6c49c68b99d6058863fbc4.gif]: https://img-blog.csdnimg.cn/31a752612d6c49c68b99d6058863fbc4.gif