Two-way data binding in Vue.js using v-model

In this tutorial we are going to learn about two-way data binding in vueby using v-model directive.

What is V-model directive ?

v-model directive helps us to create two-way data binding on the form elements (like input, textarea and select).

Let’s see an example.

<template> <input v-model="name" placeholder="name"/>  <p>{{name}}</p></template><script>  export default{      data:function(){          return{              name:""          }      }  }</script>

Here we bind the form input element to the name property using v-model, so that when a user updates the input field it also updates the name property linked to it.

Modifiers

v-model directive comes with a modifier options.

.lazy: By default v-model directive updates the data property on every keypress by adding.lazy modifier it only updates the data after a change event is triggered.

<span>&lt;template&gt; &lt;input v-model.lazy="name" placeholder="name"/&gt;&lt;/template&gt;

.trim: It is used to remove the leading and trailing white spaces.

<template> <input v-model.trim="name" placeholder="name"/></template>

.number: If you want to accept number to the input field then you need to use .number modifier.

<template> <input v-model.number="age" placeholder="age"/></template>