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>neveropen</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>neveropen</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 |
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
