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 |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...