Two Way Data Binding and V-Model in Vue.js

Two way data binding sets up a binding attribute and an event listener that are executed at the same time. It’s like combining v-bind with v-on all in one directive.

Vue.js sets up two way data binding with v-model, which is usually inserted in an input tag.

<div id="app">
   <label>Enter Your Name</label>
   <input v-model="name">
   <p>{{ name }}</p>

 new Vue({
   el: "#app",
   data: {
     name: "Name",

In the input tag v-model calls the name variable from the Vue data object. It grabs the string “Name” and puts it into the input field. The p tag also displays the name variable. On your webpage if you delete “Name” from the input field and start typing anything else there, the {{ name }} variable will update in real time.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s