Vue.js Two Way Binding Model
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...