Difference between v-bind and v-model in Vue.js

0 0 2 minutes read

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">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <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>zambiatek</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">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <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>zambiatek</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, zambiatek 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!