Vue JS 2 Two-Way Data Binding


In Vue JS Two-Way Data Binding is a very interesting topic to learn. let's know what is two-way data binding when we enter some values in the input box at real-time Vue instance update the value of none which is defined in Vue instance.

index.html

    <div id="vue-app">
        <h3> Two-Way Data Binding</h3>
        <label for="name">Name:</label>
        <input type="text" v-model="name"> 
        {{name}}<br>

        <label for="">Age:</label>
        <input type="text" v-model="age">
        {{age}}
    </div>

Here are simple two labels with two text box fields name and age. in the text box, we use the v-model directive. v-model is one of the few directives that comes bundled with Vue.js. The thing that makes it great is the fact that it allows for two-way data binding between our views and data.

app.js

  new Vue({
    el: '#vue-app', 
   
   	data:{
          name:'',
          age:'',
           },
        
 });

This simply defines two property name and age with none values. when we run this code we see this result.

two way data binding in vue js

When we enter some value in the text field at the real-time name will be updated with none value.