Open In App

Vue.js Two Way Binding Model

Last Updated : 07 Jun, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
  </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=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
      </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:


H
hunter__js
Improve
Article Tags :

Explore

Lightbox