Skip to content
Related Articles

Related Articles

Vue.js Two Way Binding Model

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 07 Jun, 2022

Vue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries.

The v-model directive makes two-way binding between a form input and app state very easy to implement. One can bind a form input element and make it change the Vue data property when the content of the field changes. These concepts can be used in such cases where according to a field value we also want to update some other field values. After recent updates v-model can be used on the child components also, helping developers to make reusable inputs with completely different behaviors. The below examples demonstrate this concept.

Example 1:

Filename- index.html:

HTML




<html>
<head>
  <script src=
  </script>
</head>
<body>
  <div id='parent'>
    <h1 style="color: green;">
      GeeksforGeeks
    </h1>
    <h3>Two Way Data Binding</h3>
     
 
<p><Strong>{{text}}</Strong></p>
 
 
    <input v-model="text">
  </div>
  <script src='app.js'></script>
</body>
</html>

Filename- app.js:

Javascript




const parent = new Vue({
    el : '#parent',
    data : {
        text : "Hi"
    }
})

Output:

Example 2:

Filename- index.html:

HTML




<html>
<head>
    <script src=
      </script>
</head>
<body>
    <div id='parent'>
        <h1 style="color: green;">
          GeeksforGeeks
          </h1>
        <strong>Sex : </strong>
        <input type="radio" id="m" value="male"
               v-model="sex">
        <label for="male">Male</label>
        <input type="radio" id="f" value="female"
               v-model="sex">
        <label for="female">Female</label>
        <input type="radio" id="b" value="bi-sexual"
               v-model="sex">
        <label for="bi-sexual">Bisexual</label>
         
 
<p><strong>Your Sex: </strong>{{ sex }}</p>
 
 
    </div>
    <script src='app.js'></script>
</body>
</html>

Filename- app.js:

Javascript




const parent = new Vue({
    el : '#parent',
    data : {
        address:''
    }
})

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!