Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 01 Jul, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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>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">
    <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>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.



My Personal Notes arrow_drop_up
Recommended Articles
Page :