Skip to content
Related Articles

Related Articles

Improve Article
Vue.js Two Way Binding Model
  • Last Updated : 04 Mar, 2021

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. 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 :