Learn how to manage Class binding to HTML using Vue.js

Class Binding in Vue.js

Class binding refers to the binding of the classes to the HTML element in Vue.js. These bindings can be dynamic and do help in adding dynamic styles to HTML elements. As in the previous tutorials, we have examined several directives. In this tutorial, we will have a look at the v-bind. v-bind helps in binding values to the DOM and in this article, we will be using it to bind classes to the HTML. We will use the string values that the are being calculated or evaluated and being assigned to the v-bind. Let’s get started with it and examine how v-bind can be used to evaluate and attach classes to the DOM.

Our structure of the tutorial remains the same and we need the JSFiddle setup as mentioned earlier in order to begin. You can alternatively also view the way in which we can get started with Vue.js if you haven’t already done that or are new to Vue.js.

Single Class Binding to the HTML

In this section have we will show you the output of the entire application first and then move to the core of it.

Class Binding in Vue.js

In the above example, there is a checkbox which helps in toggling the code. We evaluate the property of the checkbox whether it’s true or false and accordingly we change the associated class using a v-bind.

The code is pretty simple. In the code below, you can see how we have evaluated the Object expression where the isBgColor is a property of the app which is being toggled using the checkbox. The Vue.js Code is very simple and intuitive.

HTML

<div class="dimensions" v-bind:class="{bgColor:isBgColor}">
    <h1>This is the Div single class toggle</h1>
  </div>

Vue.js Code

var app = new Vue({
  el: '#app',
  data: {
    isBgColor: false,
  }
});

The above code is fine for a single class manipulation but when it comes to multiple class manipulation and effects that require a lot of UI response we then need to evaluate multiple classes. Let’s check that out.

Multiple Class Binding in HTML

We will expand the above case and move to multiple class binding. It’s the same as above. the only difference that you will see is that now the evaluations are being injected as a simple JavaScript Object. I have written the object as below

{ 
'border':isBorder,
'shadow':isShadow,
'rounded':isBorderRounded
}

Where the isBorder, isShadow, isBorderRounded the property that we are toggling. So let’s have a look at the JavaScript and the HTML associated with the above.

HTML

<input type="checkbox" id="checkbox" v-model="isBorder">Border:{{isBorder}}
  <input type="checkbox" id="checkbox" v-model="isShadow">Shadow:{{isShadow}}
  <input type="checkbox" id="checkbox" v-model="isBorderRounded">Rounded Border:{{isBorderRounded}}
  <div class="dimensions" v-bind:class="{ 'border':isBorder,'shadow':isShadow,'rounded':isBorderRounded}">
    <h1>Div with Multiple class Toggle</h1>
  </div>

Vue.js Code

var app = new Vue({
  el: '#app',
  data: {
    isBorder: false,
    isShadow: false,
    isLayoutCard: false,
    isBorderRounded: false
  }
});

CSS

.bgColor {
  background-color: olive;
}

.border {
  border: 1px solid red;
}

.shadow {
  box-shadow: 0px 14px 10px lightgrey;
}

.rounded {
  border-radius: 20%;
}

.dimensions {
  height: 90px;
  line-height: 90px;
  text-align: center;
}

Now in the above code, you can see how the CSS property is being evaluated. This is so simple to implement and get along with. We just use the v-bind:class and then put the JSON in place as shown below:-

<div class="dimensions" v-bind:class="{ 'border':isBorder,'shadow':isShadow,'rounded':isBorderRounded}">

You see how simple it is. The moment the evaluated value is true we have the class being applied to the element. Now let’s see a demo below. You can go to JSFiddle as well to see the demonstration.

Multiple Class applied to the HTML using Vue.js

You can also have a look at the complete code for the above, it’s being attached below as a JSFiddle sample.

If you want to know more about the Data Binding on the there are two different tutorials that can help you to immediately get started

1. Data Binding with Differetn Form Componenets
2. Data Binding with Select Buttons & Multiselect

Array Syntax for Modifying Class

Arrays can add a lot of complex Class based manipulation in place. You can imagine the power of it when you see this in place and use it out. So the way it works is by just pushing your array in the same way as you do with the JSON object. We have projected a sample below.

<div class="dimensions" v-bind:class="['textColor','textShadow']">
    <h1>Div with Multiple class Toggle</h1>
  </div>

The above code will just add these two classes into the code. You can use Ternary operator along side to make sense of the whole thing. You can use the Object as well as the string values in order to mix and match and make various combinations.

<div class="dimensions" v-bind:class="[{ 'border':isBorder,'shadow':isShadow,'rounded':isBorderRounded},'textShadow','textColor']">
    <h1>Div with Multiple class Toggle</h1>
  </div>

Now the JavaScript Code remains the same and about the code above, you can see that the checkboxes work but along with that you can have the textColor JSFiddle being applied by default. So let’s see the sample GIF and alternatively, you can have a look at the Sample.

Array Syntax Class Binding

We have embedded the JSFiddle Sample As well. Have a look at it give below

Conclusion

By now it must be clear that handling the CSS using v-bind is just a breeze. You can learn in no time and practice it out in your application. This tutorial will give you a perfect understanding of how to get along with Class binding. Let us know your views about the same. We will be really happy to converse about our work and even serve your requests.

Originally published at The Web Juice.