Vue’s V-model and modifier

The V-Model implements bidirectional binding between form elements and data

It is essentially a combination of v-bind and V-ON: input. Whenever you change the DOM or the background, the other one must change

<input type=’text’ v-model=’message’>

<script> 

   const app =new Vue({ 

       el:’#app’, 

      data:{ 

           counter:0,

           message:’aaa’

         }

})

</script>  

Lazy modifiers: V-model defaults to synchronizing input box data with lazy, which can be updated after losing focus

<input type=’text’ v-model.lazy=’message’>

Number: Everything entered in the input field is a string by default. Number can be converted to a number automatically

<input type=’text’ v-model.number=’message’>

Trim: If there are many Spaces around the input, trim removes these Spaces

<input type=’text’ v-model.trim=’message’>