The modifier

Lazy modifier:

  • Understanding: Like input, we don’t have to change the binding in real time, the value of our binding is changing when the user loses focus or presses enter
  • By default, v-Model synchronizes input field data in input events by default.
  • In other words, the data in the corresponding data will be automatically changed once the data is changed.
  • The lazy modifier allows data to be updated only when it loses focus or returns:
 <! DOCTYPEhtml>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 ​
 <div id="app">
 ​
     <input type="text" v-model.lazy="message">
     {{message}}
 </div>
 ​
 <script src=".. /vue.js"></script>
 ​
 <script>
     const app = new Vue({
         el:"#app".data: {message:"hello world"}})</script>
 </body>
 </html>
Copy the code

The effect is as follows:

Number the modifier:

  • By default, whether we enter letters or numbers in the input field is treated as a string.
  • But if we want to deal with numeric types, it’s better to treat the content as a number.
  • The number modifier automatically converts what is entered in the input field to a number type
 <! DOCTYPEhtml>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 ​
 <div id="app">
 ​
     <input type="number" v-model="age">
     <input type="number" v-model.number="age">
     {{ age}}-{{typeof age}}
 </div>
 ​
 <script src=".. /vue.js"></script>
 ​
 <script>
     const app = new Vue({
         el:"#app".data: {message:"hello world".age:20}})</script>
 </body>
 </html>
Copy the code

The effect is as follows:

  • When dot number is not added, the default is string

  • When you add dot number, the default is number

Trim the modifier:

  • If the input has a lot of white space at the beginning and end, we usually want to remove it
  • The trim modifier filters whitespace on the left and right sides of content
 <! DOCTYPEhtml>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 ​
 <div id="app">
 ​
     <input type="text" v-model.trim="message">
     {{message}}
 </div>
 ​
 <script src=".. /vue.js"></script>
 ​
 <script>
     const app = new Vue({
         el:"#app".data: {message:"hello world"}})</script>
 </body>
 </html>
Copy the code

The effect is as follows: