Vue.js Two Way Binding Model (original) (raw)
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 `
GeeksforGeeks
Two Way Data Binding
{{text}}
<input v-model="text">`
Filename- app.js:
JavaScript `
const parent = new Vue({ el : '#parent', data : { text : "Hi" } })
`
Output:
Example 2:
Filename- index.html:
HTML `
GeeksforGeeks
Sex : Male Female BisexualYour Sex: {{ sex }}
</div>
<script src='app.js'></script>`
Filename- app.js:
JavaScript `
const parent = new Vue({ el : '#parent', data : { address:'' } })
`
Output:
