Using v-model in Vue.js

Vue.js two-way binding system takes one of the trickiest parts of developing a web application, user input synchronization, and makes it dead simple with v-model. The v-model directive updates the template whenever the model changes and updates data model whenever the template changes.

Two-way binding is a powerful feature that, if used properly, can significantly speed up your development process. It reduces the complexity of keeping user input consistent with the application data model.

1) Binding to Text Input Elements:

• To bind the value of an input element to a property of your component’s data, use v-model="dataProperty"
• Here’s The Example:

data() {
  return {
    Message: 'Hello Vue.js'
  };
}

<input v-model="Message"/>

2) Handy directive modifiers

• To make the model update when the change event occurs, and not any time the user presses a key, you can use v-model.lazy instead of just v.model.
• Working with input fields, v-model.trim is useful because it automatically removes whitespace.
• And if you accept a number instead than a string, make sure you use v-model.number.