Vue.js Data Binding

Vue.js supports different types of data binding. Before going to learn data binding in Vue.js, let's see what data binding is and how it is used.

What is Data binding?

Data binding is a technique used to bind data sources from the provider and consumer together and synchronize them at the time of retrieval. In a data binding process, whenever data is changed, it is reflected automatically by the elements bound to the data.

The term data binding is also used in cases where an outer representation of data in an element changes, and the underlying data is automatically updated to reflect this change.

Vue.js Class and Style Binding

In Vue.js data binding, we have to manipulate the class list and inline styles of an element. We already know that the class list and inline style are attributes so we can use v-bind to handle them. Vue.js provides special enhancements when we use v-bind with class and style. The expressions can also evaluate to objects or arrays along with strings.

Here, we will learn how to manipulate or assign values to HTML attributes, change the style, and assign classes with the help of Vue.js binding directive v-bind. Let's see a simple example to understand why and when to use v-bind directive for data binding.

Index.html file:

<html>  
   <head>  
      <title>Vue.js Data Binding</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "databinding">  
         <h3>{{title}}</h3>  
         <a href = "hreflink" target = "_blank"> Click Here </a> <br/>  
         <a href = "{{hreflink}}" target = "_blank">Click Here </a>  <br/>  
         <a v-bind:href = "hreflink" target = "_blank">Click Here </a>   <br/>  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({
el: '#databinding',
data: {
title : "Data Binding Simple Example",
hreflink : "http://www.coderfunda.tk"
}
})

Let's use a simple CSS file to make the output more attractive.

Index.css file:

html, body {
margin: 5px;
padding: 0;
}

After the execution of the program, you will see the following output:

Example Explanation

In the above example, you can see a title variable and three anchor links as following:

<h3>{{title}}</h3>  
<a href = "hreflink" target = "_blank"> Click Here </a> <br/>  
<a href = "{{hreflink}}" target = "_blank">Click Here </a>  <br/>  
<a v-bind:href = "hreflink" target = "_blank">Click Here </a>   <br/>  

We have also assigned a value hreflink : "http://www.coderfunda.tk" to the href from the data object.

If you click on the first Click Here link, it shows the href as hreflink so it will not redirect to the targeted url.
If you click on the second Click Here link, it shows the href as {{hreflink}}, so it will also not redirect to the targeted url.
Only the third one will redirect the correct targeted url because we have to bind it with the v-bind directive. See the following result.

So, to assign values to HTML attributes, we have to bind it with the v-bind directive as follows:

<a v-bind:href = "hreflink" target = "_blank">Click Here</a>  

You can also use a shorthand to include v-bind directive as follows:

<a :href = "hreflink" target = "_blank">Click Here</a>  

Note: If you inspect element of the result, you will see that the anchor tag does not show the v-bind attribute. It displays a plain HTML. The Vue.js properties are seen when we inspect the DOM.

Vue.js HTML Classes Binding

In Vue.js, we can bind an HTML class by using the v-bind: class directive. Let's see an example to demonstrate the binding of HTML classes in Vue.js.

Index.html file:

<html>  
   <head>  
      <title>Vue.js Data Binding</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <style>  
         .active {  
            background: skyblue;  
         }  
      </style>  
      <div id = "classbinding">  
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML class binding example",
isactive : true
}
})

After the execution of the program, you will see the following output:

In the above example, we have created a div with v-bind: class=" {active: isactive}". Here, isactive is a variable based on true or false values. This isactive variable is used to apply class active to the div. When we assign isactive variable as true, it shows the specified style in result as we have defined in the style .active with the background color as skyblue.

If you set the variable isactive is false, it will not apply the specified style in the result.

Index.js file:

var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML class binding example",
isactive : false
}
})

After the execution of the program, you will see the following output:

Assign multiple classes to HTML tags

You can also assign multiple classes to HTML tags using v-bind attribute. See the following example:

Index.html file:

<html>  
   <head>  
      <title>Vue.js Data Binding</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <style>  
         .info {  
            color: #00529B;  
            background-color: #BDE5F8;  
         }  
         div {  
            margin: 10px 0;  
            padding: 12px;  
         }  
         .active {  
            color: #4F8A10;  
            background-color: #DFF2BF;  
         }  
         .displayError{  
            color: #D8000C;  
            background-color: #FFBABA;  
         }  
      </style>  
      <div id = "classbinding">  
         <div class = "info"  v-bind:class = "{ active: isActive, 'displayError': hasError }">  
            {{title}}  
         </div>  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML multiple class binding example",
isActive : false,
hasError : false
}
})

In the above example, you can see that only the normal class is applied. Both other variables are false right now. Now, let' see what will happen when we set isActive variable to true:

var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML multiple class binding example",
isActive : true,
hasError : false
}
})

In the above example, we have assigned two classes to the div, info and active. Now, let's make hasError variable true and isActive false and then see the result.

var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML multiple class binding example",
isActive : false,
hasError : true
}
})

Now, in the above example, info and displayError class is applied to the div. This is how you can apply multiple classes according to the conditions.

Assign multiple classes using an array

We can also pass class as an array. See the following example to understand this well:

Syntax:

<div v-bind:class="[activeClass, errorClass]"></div>  

Example:

Index.html file:

<html>  
   <head>  
      <title>Vue.js Data Binding</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
       <style>  
         .info {  
            color: #00529B;  
            background-color: #BDE5F8;  
         }  
         div {  
            margin: 10px 0;  
            padding: 12px;  
            font-size : 25px;  
         }  
         .active {  
            color: #4F8A10;  
            background-color: #DFF2BF;  
         }  
         .displayError{  
            color: #D8000C;  
            background-color: #FFBABA;  
         }  
      </style>  
      <div id = "classbinding">  
         <div v-bind:class = "[infoclass, errorclass]">{{title}}</div>  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({
el: '#classbinding',
data: {
title : "Multiple classes with array example",
infoclass : 'info',
errorclass : 'displayError'
}
})

After the execution of the program, you will see the following output:

In the above example, both classes are applied to the div.

Vue.js Inline Style Binding

Object Syntax

The object syntax for v-bind:style is just like CSS, but it's a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:

HTML:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>  

CSS:

data: {
activeColor: 'red',
fontSize: 30
}

You can also bind a style object directly to make the template cleaner.

HTML:

<div v-bind:style="styleObject"></div>  

CSS:

data: {
styleObject: {
color: 'red',
fontSize: '30px'
}
}

Let's take an example to understand the concept clearly.

Index.html file:

<html>  
   <head>  
      <title>Vue.js Data Binding</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "databinding">  
         <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding Example",
activeColor: 'red',
fontSize :'30'
}
})

After the execution of the program, you will see the following output

In the above example, you can see that the style is applied for the div, and the data is fetched from the data object.

You can fetch the same result by assigning all the values to a variable and then assigning the variable to the div.

Example:

Index.html file:

<html>  
   <head>  
      <title>Vue.js Data Binding</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "databinding">  
         <div v-bind:style = "styleobj">{{title}}</div>  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding Example-2",
styleobj : {
color: 'red',
fontSize :'30px'
}
}
})

In the above example, you can see that the color and the fontSize is assigned to the object called styleobj and the same is assigned to the div.

31 December, 2020

Vue.js Data Binding

What is Data binding?

Vue.js Class and Style Binding

Example Explanation

Note: If you inspect element of the result, you will see that the anchor tag does not show the v-bind attribute. It displays a plain HTML. The Vue.js properties are seen when we inspect the DOM.

Vue.js HTML Classes Binding

Assign multiple classes to HTML tags

Assign multiple classes using an array

Vue.js Inline Style Binding

0 comments:

Post a Comment

Meta

Popular Posts

Categories

Social Media Links

Pages

Blog Archive

Laravel News