Vue的表单处理全解

旧城等待， 2024-03-26 15:22 19阅读 0赞

> 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

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

*  表单处理
 *  知识点
 *   *  基本用法
     *  文本
     *  多行文本
     *  单选按钮
     *  复选框
     *  多个复选框
     *  选择框
     *  值绑定
     *  单选按钮
     *  复选框
     *  选择框
     *  修饰符
     *  .number
     *  .trim
     *  综合小练习

--------------------

## 表单处理 ##

在日常的开发中，表单随处都被使用到，如：登录，问题反馈功能等。对表单的数据收集和绑定也是很常规的工作。在一般开发中处理表单，需要通过操作 DOM 来实现，是一个相对繁琐且低效率的工作。然而在 Vue 项目中你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。接下来带领大家看看其基础用法。

## 知识点 ##

*  v-model 指令
 *  基础用法
 *  值绑定
 *  修饰符

### 基本用法 ###

**常用表单元素**  
![在这里插入图片描述][c2ba48459ad94de591d2e1d383372537.png]  
`注意`

> 注意一：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。直接给元素 value 赋值不会生效的，你应该通过 JavaScript 在组件的 data 选项中声明初始值。

> 注意二：v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件，具体体现我们在表单 修饰符小节，给大家说明：

*  text 和 textarea 元素使用 value 属性和 input 事件（内部监听 input 事件）；
 *  checkbox 和 radio 使用 checked 属性和 change 事件（内部监听 change 事件）；
 *  select 字段将 value 作为 prop 并将 change 作为事件（内部监听 change 事件）。

> 说明： change 和 input 区别就是，input 实时更新数据，change 不是实时更新。

![input 监听][input]  
![change 监听][change]

> 带着注意事项，进入 Vue 表单处理学习。

### 文本 ###

> 直接为文本绑定 v-model 指令，在 data 数据项中声明绑定数据项，可以轻松完成双向数据绑定。让我们来看看神奇的 v-model 指令。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>syl-vue-test</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        <div id="app">
          <input v-model="msg" placeholder="请输入..." />
          <p>输入的是: {
       { msg }}</p>
        </div>
        <script>
          var app = new Vue({
          
            el: "#app",
            data: {
          
              msg: "",
            },
          });
        </script>
      </body>
    </html>

### 多行文本 ###

> 多行文本和文本用法相同，使用 v-model 指令，在实例 data 中声明绑定的 message 数据项，即可完成多行文本数据双向绑定。

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

### 单选按钮 ###

> 将单选按钮绑定到同一个 picked，即可完成数据绑定，当第一个单选被选中 picked 的值为第一个单选按钮的 value，同样当第二个单选被选中 picked 的值为第二个单选按钮的 value。

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

### 复选框 ###

> 复选框绑定的是一个布尔值（true or false），同样在复选框元素上使用 v-model 指令，在实例 data 中声明 checked，即可完成复选框数据的双向绑定。

### 多个复选框 ###

> 通常开发中，会用到多个复选框，那么我们就需要把复选框，绑定到同一个数组，方便数据收集。

### 选择框 ###

> 在 select 元素上使用 v-model 指令，可以绑定当前选中的 option。

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

### 值绑定 ###

**文本和多行文本值绑定**

> 直接在标签上指定 value 是不能成功的，会被 Vue 忽略。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>syl-vue-test</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        <div id="app">
          
          <input v-model="msg" value="hello" />
        </div>
        <script>
          var app = new Vue({
          
            el: "#app",
            data: {
          
              msg: "",
            },
          });
        </script>
      </body>
    </html>

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

> 正确模式，通过 JavaScript 在组件的 data 选项中声明初始值：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>syl-vue-test</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        <div id="app">
          
          <input v-model="msg" />
          <br />
          <br />
          <br />
          <textarea v-model="msg"></textarea>
        </div>
        <script>
          var app = new Vue({
          
            el: "#app",
            data: {
          
              msg: "hello",
            },
          });
        </script>
      </body>
    </html>

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

### 单选按钮 ###

> checkbox 和 radio 使用 checked 属性，所以直接给元素 value 值，当选中时 data 中声明的绑定项的值就为元素 value。

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

### 复选框 ###

> 复选框可以是布尔值，toggle 为 true 或 false，当选中时，toggle 为 true，未选中时，toggle 为 false。

> 在日常开发中，复选框的值很多情况是特定的值，那么我们可以这样做，在标签中声明 true-value=“yes” 和 false-value=“no” 这两个属性，当选中时就是 true-value 属性指定的值，当未选中时就是 false-value 属性值。

> 如果你只想要选中有值，你可以这样做，true-value 属性指定值，false-value 属性设为空值。

### 选择框 ###

> 选择框的值绑定，直接指定每个 option 的 value，可以是固定的，也可以是使用 v-bind:value 动态绑定的：

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

### 修饰符 ###

> Vue 总结了日常开发中经常进行的表单处理业务，进行了封装，使用表单修饰符轻松解决一些表单处理的业务逻辑。

**.lazy**

> 开始介绍表单处理时，我们说了几点注意，不同的元素，使用的值不同，抛出的事件也不同。可能开发中，我们不需要数据实时更新，那么，我们怎么将 input 事件与 change 事件替换，可以使用 .lazy 修饰符，可以将抛出事件由 input 改为 change，使表单元素惰性更新，不实时更新。

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

### .number ###

> 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

> 这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值返回字符串（默认），需要自己进行类型转换。如果这个值无法被 parseFloat() 解析，则会返回原始的值。 给 v-model 添加 number 修饰符，用户即使输入的是非数值类型，也会进行转换，无法转换时，会返回原始的。

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

### .trim ###

> 表单元素值首尾空格，自动过滤。

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

### 综合小练习 ###

> 表单数据收集与绑定。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>vue</title>
        <script src="vue.min.js"></script>
        <style>
          * {
          
            padding: 0;
            margin: 0;
          }
          html,
          body {
          
            width: 100%;
            height: 100%;
            overflow: hidden;
          }
          #app {
          
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 400px;
            height: 400px;
          }
        </style>
      </head>
    
      <body>
        <div id="app">
          <form class="app-form">
            <span>name:      </span>
            <input type="text" v-model="username" />
            <br />
            <span>password:</span><input type="password" v-model="password" />
            <br />
            <span
              >sex:          </span
            >
            <input type="radio" id="man" value="man" v-model="sex" />
            <label for="man">man</label>
            <input type="radio" id="woman" value="woman" v-model="sex" />
            <label for="woman">women</label>
            <br />
            <span>hobby:</span>
            <input type="checkbox" id="game" value="game" v-model="hobby" />
            <label for="game">game</label>
            <input
              type="checkbox"
              id="basketball"
              value="basketball"
              v-model="hobby"
            />
            <label for="basketball">basketball</label>
            <input type="checkbox" id="study" value="study" v-model="hobby" />
            <label for="study">study</label>
            <br />
            <br />
            <p>名字：{
       {username}}</p>
            <p>密码：{
       {password}}</p>
            <p>性别:{
       {sex}}</p>
            <p>爱好：{
       {hobby}}</p>
          </form>
        </div>
        <script>
          var vue = new Vue({
          
            el: "#app",
            data() {
          
              return {
          
                username: "",
                password: "",
                sex: "man", // 性别单选默认勾选男
                hobby: [],
              };
            },
          });
        </script>
      </body>
    </html>

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

[c2ba48459ad94de591d2e1d383372537.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/842250feaa23417199b6083b58e740c0.png
[input]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ba7e24a83b50462d80483c703fd7a8cc.png
[change]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1e89ac3e4c2c45c89ee0e772b1f46fb0.png
[63c3e1a252e7470cb5977a6a2d727c87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/019a0ebc4f0344c19e4c43c20e94b03a.png
[d3c71039a9a44384ae07b8a0d45a0428.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c50bd913e7df483987d4a41a6ae7011a.png
[0f3c1773c05846e4a46801f7301df1c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5e2e2fe81c4d4e9388ac8f0ae14970c2.png
[79f121b0e80f41b7a03d78fd5168e833.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b5759d2c04624313aff7d6f4e2f1acb1.png
[4bf445b95e474f0eac90cecb2609a504.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/92ac434d346141d3b5a118cf36f55b11.png
[8755e711d4484197af5789659d1641ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6ec9b640594d403e9f9a15919ada793f.png
[0ebf23fed1784209a5631b5b3e209ac1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/12c733d172d94a9389c7950cae1f1025.png
[166e767590d145b797050b8dcd6e63f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3dc1180f2cea4202b80ca547d604891e.png
[ffc76d6b55284f0b8d4b03f9ba19bfd1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8fa05aa364664917bbb9173a42a98455.png
[977670703e78416896601e9d2c4e2210.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c7d181da1ace432abd32ecb060960be2.png
[03bc4c012d68409291ba855afebfcf07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d205a7304cad415fab24101b8eb205d5.png