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">
 <div>
   <label>Enter Your Name</label>
   <input v-model="name">
   <p>{{ name }}</p>
 </div>
</div>

<script>
 new Vue({
   el: "#app",
   data: {
     name: "Name",
   }
 })
</script>

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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s