Vue.js表单处理

落日橙子乳酸菌

已于 2022-02-13 19:41:30 修改

阅读量592

点赞数

分类专栏： Vue学习文章标签： vue.js javascript 前端

于 2022-02-13 19:40:20 首次发布

本文链接：https://blog.csdn.net/m0_48670609/article/details/122800469

版权

Vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、表单输入绑定：v-model指令

在Vue.js中，表单输入绑定使用v-model指令。

v-model指令的作用

v-model指令用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定。
<input> 、<textarea> 及 <select> 元素属于可输入元素，可以双向数据绑定，从数据到视图，从视图到数据，双向数据绑定。

v-model指令实现双向数据绑定示例

<body>
    <div id="app">
      <p>元素内容为： {{ value }} </p>
      <input type="text" v-model="value">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              value: ''
            //   value设置为空
            }
        });
    </script>
</body>

运行结果：
在这里插入图片描述之所以在输入框中输入时，p 标签中的内容会随之变化，是因为 p 标签内容绑定为了 value ，而 value 是数据，这个数据随着在输入框中输入内容变化而变化，即，视图更新导致了数据变化。当在控制台通过 vm 直接修改数据时，例如控制台输入 vm.value = ’ 100 ’ 回车，可以看到 p 标签的内容和输入框都显示100，即，数据变化导致了视图变化。所以，实现了对表单元素输入框的双向数据绑定。

二、表单数据绑定

1. 输入框绑定

输入框分为单行输入框 input 与多行输入框 textare，二者进行双向数据绑定的操作类似。

<body>
    <div id="app">
      <p> input输入框内容为： {{ value1 }} </p>
      <input type="text" v-model="value1">

      <p> textarea输入框内容为： {{ value2 }} </p>
      <textarea v-model="value2"></textarea>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              value1: '',
              value2: ''
            //   value1和value2都设置为空
            }
        });
    </script>
</body>

2. 单选按钮绑定

单选按钮较简单，因为只有单个元素选择情况。
这里的单选按钮指的是 <input> 标签中 type 为 radio 的元素。多个单选按钮组成一组，可以在多个单选按钮中选择一个元素作为选中选项，这里就可以通过 v-model 进行双向数据绑定，把多个同一组的单选按钮同时绑定为一个值。

<body>
    <div id="app">
      <p> radio的内容为： {{ value3 }} </p>

      <input type="radio" id="one" value="1" v-model="value3">
      <label for="one">选项1</label>

      <input type="radio" id="two" value="2"  v-model="value3">
      <label for="two">选项2</label>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              value3: ''
            }
        });
    </script>
</body>

示例中，通过两个 radio 进行 v-model 绑定，绑定至均为 value3 ，value3 是在 data 中声明的数据用来进行数据的存储，这样，不管选取的是哪一个元素，它的值就会存储到 value3 中。
在这里插入图片描述使用单选按钮操作时，操作的其实是 value ，所以网页中“radio的内容为：”后面显示是<input>标签的value 的值也就是1 或 2，会将value中的 1 或 2 绑定给value3。
既然是双向数据绑定，那么久既可以通过通过选项进行数据更改，也可以通过数据更改来进行视图更新，即在控制台通过 vm 访问 value3 的值进行更改：
在这里插入图片描述

3. 复选框绑定

复选框绑定分为单个选项与多个选项两种情况，书写方式不同。复选框是<input>标签中 type 设置为 checkbox 的元素。一般来说，使用复选框都是多个选项的情况。

单个选项的复选框

单个选项的复选框应用场景：注册页面的“阅读并接受某某协议”，登录页面的“记住我”等。如：
在这里插入图片描述
这些地方必须使用复选框，不能使用单选按钮，因为单选按钮一选就选上了，是没办法取消的，而复选框是可以勾选也可以取消的，这种情况应该使用的就是单个选项的复选框。
复选框的绑定与单选按钮是相似的。

<body>
    <div id="app">
      <p> 单个checkbox选中的数据为： {{ value4 }} </p>
      <input type="checkbox" id="item" value="选项内容" v-model="value4">
      <label for="item">选项</label> 
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              value4: ''
            }
        });
    </script>
</body>

运行结果：
在这里插入图片描述
注意，点击复选框时当前元素展示的内容并不是当前元素的 value，而是布尔值 true，再次点击即取消选择可以看到显示 false，true 与 false代表当前元素是否被选中。这个点其实对后期处理是比较方便的，可以直接利用布尔值判断用户是否选中当前选项，无需进行内容的比较再判断。但是，当前元素的 value 依然要设置，因为做表单提交处理时表单提交提交的是 value 信息。

多个选项的复选框

对于复选框的绑定，单个选项与多个选项的主要区别点在于 data 中value 的设置，单个选项value设置为数值，而多个选项时value设置为数组，因为进行多个选项选中时，多个选项的值都需要同时保存，所以这种情况下就需要利用数组进行接收。而且需要注意，在设置视图结构时，要提前考虑好是单个选项还是多个选项，因为在data中的数据是需要提前声明的，如果是单个选项就声明初始值为空字符串，如果是多个选项就需要将初始值设置为数组。

<body>
    <div id="app">
      <p> 多个checkbox选中的数据为： {{ value5 }} </p>
      <input type="checkbox" id="one" value="选项一内容" v-model="value5">
      <label for="one">选项一</label> 

      <input type="checkbox" id="two" value="选项二内容" v-model="value5">
      <label for="two">选项二</label> 
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              value5: []
            }
        });
    </script>
</body>

运行结果：
在这里插入图片描述
注意：多个复选框绑定处理时，多个复选框绑定的数据存储在数组中，数组中的值时当前选项的value值，不是布尔值。

4. 选择框绑定

选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同。选择框<select>标签。
注意，最终数据绑定给了<select>标签，而不是某个选项，因为 select 是主体，而内部的选项只是某一次选择的内容而已。
单选绑定和多选绑定类似于复选框的单个选项和多个选项的情况。
注意结构，单选一般会有一个“请选择”的空选项，而多选没有，因为同时选择空选项和选项x是不合理的。

单选绑定

<body>
  <div id="app">
    <p> 单选select的数据为： {{ value6 }} </p>
    <select v-model="value6"> <!-- 绑定给select而不是某个选项 -->
      <option value="">请选择</option>
      <option value="1">选项一</option>
      <option value="2">选项二</option>
      <option value="3">选项三</option>
    </select>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            value6: ''
          }
      });
  </script>
</body>

运行结果：
在这里插入图片描述

多选绑定

多选multiple

<body>
  <div id="app">
    <p> 多选select的数据为： {{ value7 }} </p>
    <select v-model="value7" multiple> <!-- 绑定给select而不是某个选项 -->
      <option value="1">选项一</option>
      <option value="2">选项二</option>
      <option value="3">选项三</option>
    </select>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            value7: []
          }
      });
  </script>
</body>

运行结果：
在这里插入图片描述
当然，不论是单选绑定还是多选绑定，都可以在控制台用vm如vm.value7=[‘1’, ‘3’]实现更改数据驱动视图更新的效果，因为都是双向数据绑定。

三、v-model指令小结

input 输入框：绑定字符串值。
textarea 输入框：绑定字符串值。
radio：绑定字符串值。
checkbox：单个绑定布尔值，多个绑定数组。
select：单选绑定字符串，多选绑定数组

四、修饰符

修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作。
修饰符根据功能不同有很多种类别，接下来学习的修饰符有：

事件修饰符：用来对事件进行修饰，例如，设置一个事件后，希望这个事件不产生任何的事件冒泡行为，此时可以利用事件修饰符进行处理。
-按键修饰符：只对键盘事件生效，例如，点击键盘按键时，如果希望判断当前点击的按键是哪些，例如常用的回车键，esc键，可以通过按键修饰符进行设置，非常简洁。
系统修饰符：也属于一种按键修饰符，指的是当点击一些系统键，例如ctrl键，shift键等按键时，要进行的事件操作。
鼠标修饰符：需要配合鼠标事件，例如可以判断当前鼠标点击的是鼠标左键还是右键等情况。
v-model修饰符：v-model用来设置双向数据绑定，v-model修饰符可以在进行数据绑定的过程中，例如输入内容，可以将输入内容的两端空格去除，就可以通过v-model修饰符来完成。

1. 事件修饰符

① .prevent修饰符

用于阻止默认事件行为，功能相当于DOM中的 event.preventDefault()。
在DOM操作中，例如，<a>标签这种标签是有默认行为的，例如点击<a>标签后，它会呈现跳转，如果不希望元素不呈现默认事件行为，就可以设置自定义的事件并在事件中接收事件对象，通过事件对象event的event.preventDefault()调用方法即可阻止默认行为。在Vue.js中，为了简化上述操作，通过 .prevent修饰符进行设置。

<body>
  <div id="app">
    <a href="https://www.baidu.com">链接跳转</a>
    <a @click.prevent href="https://www.baidu.com">阻止链接跳转</a>
    <a @click.prevent="fn" href="https://www.baidu.com">阻止链接跳转并添加自定义功能</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn () {
              console.log('这是a标签内容');
            }
          }
      });
  </script>
</body>

上述示例中，阻止<a>标签的默认跳转行为，用@click.prevent。如果希望不仅不跳转，还添加自定义功能，那就可以用@click.prevent=“fn”，fn 写在methods中。一般情况下，会用@click.prevent=“fn”方式，因为一般阻止跳转就会希望有一些其他功能。

② .stop修饰符

用于阻止事件传播，功能相当于 DOM中的event.stopPropagation()。
我们知道，在JavaScript的DOM的事件中，每一个元素在进行事件触发后，默认都会产生事件冒泡，这个事件冒泡会导致当前元素的事件触发后，向上传递，传递给父元素并依次向外传递。如果外部的某一个元素也具有了同类型的事件，这时也会被触发。如果不希望当前事件产生事件冒泡的效果，就需要事件对象event去调用stopPropagation()这个方法。在Vue.js中，提供了 .stop修饰符，专门用来执行这个操作。

<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>测试</title>
    <style>
      #app div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
    </style>
</head>
<body>
  <div id="app">
    <div @click="fn1">
      <button @click="fn2">按钮</button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn1 () {
              console.log('这是div的点击事件');
            },
            fn2 () {
              console.log('这是button的点击事件')
            }
          }
      });
  </script>
</body>

运行结果：
在这里插入图片描述点击按钮弹出两句说明点击按钮不仅触发了button点击事件，同时也触发了div的点击事件，div的事件触发就是由事件冒泡导致的。如果不希望按钮的事件可以冒泡给父元素div，那么就可以给当前按钮元素阻止事件传播，用 .stop修饰符进行设置。

<body>
  <div id="app">
    <div @click="fn1">
      <button @click.stop ="fn2">按钮</button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn1 () {
              console.log('这是div的点击事件');
            },
            fn2 () {
              console.log('这是button的点击事件')
            }
          }
      });
  </script>
</body>

Vue.js 中允许修饰符进行连写，例如：@click.prevent.stop

对于一个<a>标签，如果既希望阻止<a>标签的跳转行为，又不希望事件冒泡的发生。

<body>
  <div id="app">
    <div @click="fn1">
      <a @click.prevent.stop="fn2" href="https://www.baidu.com">链接</a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn1 () {
              console.log('这是div的点击事件');
            },
            fn2 () {
              console.log('这是button的点击事件')
            }
          }
      });
  </script>
</body>

以后，在进行事件操作中要有多种要处理的需求时，就可以将多个修饰符使用在同一个指令的后面即可。

③ .once修饰符

用于设置事件只会触发一次。

<body>
  <div id="app">
    <button @click="fn">按钮</button><!-- 点击一次就触发一次 -->
    <button @click.once="fn">按钮2</button><!-- 只有首次点击触发 -->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn () {
              console.log('按钮被点击了');
            }
          }
      });
  </script>
</body>

④其他事件修饰符

Vue.js中有很多修饰符，上述三个是较常用的三个，如果想学习其他修饰符，可以在Vue.js官方文档进行学习，打开链接，顶部输入事件修饰符搜索即可。
学习链接：https://cn.vuejs.org/v2/guide/

2. 按键修饰符

按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式，目的是在用户进行内容输入或进行操作按键点击时，判断当前点击的是哪个按键。

普通按键——数字字母

先来尝试普通事件效果：

<body>
  <div id="app">
   <input type="text" @keyup="fn">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn () {
              console.log('输入了对应内容');
            }
          }
      });
  </script>
</body>

这时每输入一个字符就打印一次“输入了对应内容”，例如输入框输入 123 则在控制台输出3次。
如果希望只有输入指定按键才会触发事件才会输出“输入了对应内容”，按照传统操作，需要在事件处理程序获取到按键码才可以，按键码可以通过事件对象 event 做接收，即：

<body>
  <div id="app">
   <input type="text" @keyup="fn">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn (event) {
              console.log(event);
              console.log('输入了对应内容');
            }
          }
      });
  </script>
</body>

再次尝试，在输入框中输入123，可以看到控制台输出了3次事件对象，打开，可以看到keyCode：
在这里插入图片描述
这是一个传统方式，但是keyCode已经在标准中被废弃了，所以，如果直接用keyCode可能会不准确，但是由于兼容性不一样，所以使用新方式可能也会不支持，这时，既可以采用VS Code给我们提供的处理方式，演示如下：
第一种书写方式是直接在@keyup的事件后通过keyCode的值（此种方式需要先知道keyCode的值），例如刚才看到按键1的keyCode值是97，那么可以写成**@keyup.97**：

<body>
  <div id="app">
   <input type="text" @keyup.97="fn">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn (event) {
              console.log(event);
              console.log('输入了对应内容');
            }
          }
      });
  </script>
</body>

这时只有输入1才会触发事件输出事件对象和“输入了对应内容”，输入别的都不会触发。
所以，@keyup.97就只有输入1才可以触发。
以上是数字的操作，除了数字以外，其他按键比如a b c d这种时，也可以用这种方式。但是，对于a bc d这种字母最好用**@keyup.字母**的方式，比较直观，例如希望只有输入a才可以触发，则@keyup.a。
以上演示的按键码都是普通按键，数字字母都是输入内容的按键，键盘中除了这些，还有一些特殊的按键，下面来看特殊按键。

特殊按键

特殊按键指的是键盘中除了那些内容按键以外的类似 esc、enter、delete 等功能按键。
特殊按键也可以用上面的keyCode的方式来操作，但是由于这些按键在不同设备下的keyCode值可能会有不同，所以为了更好的兼容性，应首选内置别名，即，如果要写esc，就不要用keyCode了，直接写esc是最方便的也是兼容性最好的。
如果希望只有esc键才能触发：

<body>
  <div id="app">
   <input type="text" @keyup.esc="fn">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn (event) {
              console.log(event);
              console.log('输入了对应内容');
            }
          }
      });
  </script>
</body>

同样的，如果想学习其他按键，可以到官方网站，顶部搜索按键修饰符即可。
按键修饰符可以连写，例如@keup.a.b.c，但是注意，这里的意思是，可以触发的条件有三种，输入a或者输入b或者输入c，都可以触发事件，而不是同时输入。

3. 系统修饰符

系统修饰符与按键修饰符类似，用来进行系统按键的修饰处理操作。

系统按键

系统按键指的是 ctrl 、alt 、shift 等按键。

为什么要给系统按键单独设置修饰符

是因为系统按键的操作与普通按键的操作略有不同。
像普通按键，例如数字按键1 2 3，字母按键a b c，都是直接点击就输入内容；再比如像一些特殊按键，例如esc，空格键，删除键等，本身不是用来输入内容的，但是功能也是靠点击就可以执行了，例如一点回车键就换行，点空格键就出现一个空白字符。
但是系统按键，往往不会单独使用，例如 ctrl + c 复制，ctrl + v 粘贴。

系统按键特点

①单独点击系统操作符无效

单独点击ctrl键没有什么效果，单独点alt键也不会出现什么效果，是无法进行一些输入的处理操作的。

②系统按键通常与其他按键组合使用

这时就要回忆一下之前学的按键修饰符。之前学习按键修饰符时说到，按键修饰符可以连写，即可以写.a.b.c，但是含义指的是，点击 a 或 b或 c 任意一个键都可以，并不是同时点击abc三个按键才有效果。但是系统按键在使用时必须与其他按键组合使用，这里的**“组合”指的是同时按**，例如写的 ctrl 和 c两个按键，那么就需要同时点击 ctrl 和 c ，而不能单独点击 ctrl 或单独点击 c ，这样是不能生效的。
当想要同时点击 ctrl键和a键才能触发时，用普通按键的方式是无法达成的，假设ctrl键的keycode是17，那么@keyup.17.a = “fn” 含义为点击 ctrl 或者 a 键都可以，而不能达成只有同时点击才能触发的效果。只能用系统按键，组合使用。

系统按键修饰符示例

由于系统按键和普通按键的功能性略有区别，所以，在Vue.js中，专门提供了一些修饰符——系统修饰符。
系统修饰符中主要学习 .ctrl修饰符，.alt修饰符，.shift修饰符，分别对应 ctrl、alt、shift键相关操作。

<body>
  <div id="app">
   <input type="text" @keyup.ctrl="fn">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn (event) {
              console.log(event);
            }
          }
      });
  </script>
</body>

运行时点击ctrl键没有任何变化，不会输出event事件对象，因为系统按键必须和其他按键组合使用；当ctrl键与其他键组合使用时，例如同时按ctrl和c，控制台输出按键 c 的相关内容。
这也满足了系统按键的两个基本要求：第一个，单独点击不能有任何效果；第二个，需要与其他按键组合才能生效。
做一个示例：同时点击 ctrl 键和 q 键时，清空输入框内容。

<body>
  <div id="app">
   <input type="text" @keyup.ctrl="fn" v-model="inputValue">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            inputValue:''
            // 使用inputValue对输入框进行双向数据绑定，方便后面的清空
          },
          methods: {
            fn (event) {
              this.inputValue='';
              // 清空
            }
          }
      });
  </script>
</body>

当想要仅仅点击 ctrl 键才触发时，可以使用 .ctrl.exact 的写法。
其他系统按键修饰符可以在Vue.js官网搜索“系统修饰键”进行学习。

4.鼠标按键修饰符

鼠标按键修饰符用于设置点击事件由鼠标哪个按键来完成。
例如，希望事件可以由鼠标左键点击来完成，或者说，希望事件可以由鼠标右键点击完成，就可以使用鼠标按键修饰符进行操作。
鼠标按键修饰符主要学习：

.left 修饰符：左键点击的修饰符
.right 修饰符：右键点击时的修饰符
.middle 修饰符：中间即滚轮点击时的修饰符。

按钮默认点击事件演示：

<body>
  <div id="app">
   <button @click="fn">按钮</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn () {
              console.log('点击了按钮');
            }
          }
      });
  </script>
</body>

运行结果：
通常，点击按钮使用鼠标左键，左键点击时触发事件，控制台输出；右键点击按钮时，会弹出菜单，并且不会触发事件，控制台不会输出；鼠标中间即滚轮点击时，按钮的效果与左键点击相似，会有闪烁效果，但是，虽然闪烁了，但是并没有触发事件，控制台并不会输出。
鼠标按键修饰符使用演示：

<body>
  <div id="app">
   <button @click.left="fn">按钮1</button>
   <button @click.right="fn">按钮2</button>
   <button @click.middle="fn">按钮3</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            fn () {
              console.log('点击了按钮');
            }
          }
      });
  </script>
</body>

.left 修饰符，左键点击时可以触发事件，点击中间和右键都不会触发，与默认效果类似。
.right 修饰符，右键点击时弹出菜单且可以触发事件，点击中间和左键都不会触发事件。
.middle 修饰符，中间点击时可以触发事件，点击左键和右键都不会触发事件。

5. v-model修饰符

.trim修饰符

v-model的 .trim 修饰符用于自动过滤用户输入内容首尾两端的空格。
v-model 可以绑定的表单元素有很多，例如输入框、单选按钮、复选框、选择框，这些元素中，能够有机会用到 .trim修饰符的只有输入框元素，像 input 、textarea 。像单选按钮、复选框、选择框的内容都是靠 value 来自己设置的，所以不会出现这种不可控的情况。

<body>
  <div id="app">
   <input type="text" v-model.trim="inputValue">
   <p>{{ inputValue }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            inputValue:''
          }
      });
  </script>
</body>

.lazy修饰符

.lazy 修饰符用于将 v-model 的触发方式由 input 事件触发更改为 change事件触发。
默认 v-model 进行双向数据绑定时，例如输入框，每次输入内容，这个内容一改变就会自动的更新给数据，从而实现双向数据绑定的效果。但是如果希望将 v-model 这个双向绑定的触发方式，从 input 事件这种每次输入就更新的触发方式，更改为像 change 事件一样的触发方式，也就是每一次内容输入完毕以后，失去焦点时进行内容检测，如果内容与旧内容不同时，再进行双向数据绑定的数据更新，这时就可以使用 .lazy 修饰符，由频繁地进行数据更新更改为指定操作才更新。

<body>
  <div id="app">
   <input type="text" v-model.lazy="inputValue">
   <p>{{ inputValue }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            inputValue:''
          }
      });
  </script>
</body>

没有使用 .lazy 修饰符时，每次输入框输入内容都会自动更新到下面的 <p> 标签的内容中。使用了 .lazy 修饰符后，输入框中输入 123 此时下面的 <p> 标签中并不会出现内容，而当鼠标点击输入框以外使得失去焦点时，才进行内容比较，如果输入内容与旧内容不同时才进行更新，下面的 <p> 标签中才会出现输入的 123 。

.number修饰符

.number修饰符用于使用 parseFloat() 方式自动将用户输入的值转换为数值类型，如无法 parseFloat() 转换，例如 abc ，则返回原始内容。

<body>
  <div id="app">
   <input type="text" v-model.number="inputValue">
   <p>{{ inputValue }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
            inputValue:''
          }
      });
  </script>
</body>

输入框中输入的字符型，例如，不使用.number修饰符时，输入框输入 123 ，控制台返回“123”字符类型；使用了.number 修饰符后，输入框输入 123 ，控制台返回 123，可见是数值类型；输入框输入123.23，控制台返回123.23；输入框输入123.23abc，控制台返回123.23，因为后面的abc无法转换；如果输入框输入abc，控制台返回“abc”，无法转换则返回字符型。