Difference between v-bind and v-model in Vue.js
Last Updated :
11 Apr, 2022
This article covers the difference between v-model and v-bind in Vue.js. The following steps are used to explain their differences.
The v-model is a two-way binding which means if you change the input value, the bound data will be changed. The v-model directive is used to create two-way data bindings on form input, textarea, and select elements.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Difference between v-model and v-bind</ title >
< style >
.container {
display: flex;
justify-content: center;
align-items: center;
}
p {
padding-left: 20px;
}
h1,h2 {
text-align: center;
}
h1{
color: green;
font-size: 40px;
}
</ style >
</ head >
< body >
< section id = "app-vue" >
< h1 >GeeksforGeeks</ h1 >
< h2 >V-Model Example</ h2 >
< div class = "container" >
< input type = 'text' v-model = 'Message' />
< p > Message: {{ Message}} </ p >
</ div >
</ section >
< script >
new Vue({
el: '#app-vue',
data() {
return {
Message: ''
}
}
});
</ script >
</ body >
</ html >
|
Output: This example means that if our data changes, our input too will change, and if our input changes, our data changes too.
The v-bind is called one-way binding which means it binds our data one way. It can also be used to bind HTML attributes. This example shows a one-way data-binding using our style element using v-bind.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Difference between v-model and v-bind</ title >
< style >
.container {
display: flex;
justify-content: center;
align-items: center;
}
h1,
h2 {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
</ style >
</ head >
< body >
< section id = "app-vue" >
< h1 >GeeksforGeeks</ h1 >
< h2 >V-bind Example</ h2 >
< div v-bind:style = "headingText" >
Ezekiel Michael
</ div >
</ section >
< script >
new Vue({
el: '#app-vue',
data: {
headingText: {
color: 'red',
fontSize: '40px',
textAlign:'center'
}
}
});
</ script >
</ body >
</ html >
|
Output:
Below are differences between v-model and v-bind
V-MODEL |
V-BIND |
v-model can be changed or assigned. |
v-bind can only be assigned. |
v-model is a two-way binding. |
v-bind is a one-way binding. |
v-model is used for binding form elements like inputs, radio buttons, textarea, checkboxes. |
It is used for binding data, attributes, expressions, class, styles. |
V-model is input value sensitive. |
It is also used to pass props to child components. |
It can be implemented using Local variable watcher |
It is a directive that is used to bind one or more attributes |
Share your thoughts in the comments
Please Login to comment...