Made withVue.jsClip

Vue JS 2 Tutorial #10 - Dynamic CSS Classes

N

Net Ninja

Creator on the Vue.js channel

Watch on YouTube ↗

166K viewsApr 22, 20179:32 runtime

Learn to create interactive interfaces in Vue.js by mastering dynamic CSS classes. This tutorial demonstrates how to use `v-bind:class` to toggle classes based on component data properties. You'll explore applying classes using an object syntax and see how to manage multiple…

Chapters

#vuejs#clip#frontend

This video covers two primary ways to dynamically manage CSS classes in Vue.js.

Method 1: Binding Classes with an Inline Object

You can bind directly to the class attribute using v-bind:class and passing it an object. In this object, the keys are the class names you want to apply, and the values are booleans that determine if the class is added.

Tip
The shorthand for v-bind:class is simply :class.

For simple toggles, you can bind the boolean value to a property in your data object and modify it with events.

Example: Toggling a class on click

<div 
  v-on:click="available = !available"
  v-bind:class="{ available: available }"
>
  <span>Ryu</span>
</div>

new Vue({
  el: '#vue-app',
  data: {
    available: false
  }
});

Clicking the div toggles the available data property between true and false.
The :class binding watches the available data property and adds or removes the available CSS class accordingly.

Method 2: Managing Classes with Computed Properties

When you have several conditional classes, writing a large object inline in your HTML can become messy. A cleaner solution is to use a computed property to build the class object.

Important
Computed properties are ideal for this because they are cached based on their dependencies. The class list will only be re-calculated when one of the underlying data properties (available or nearby in this case) changes.

Example: Using a computed property for multiple classes

In your Vue instance:

new Vue({
  el: '#vue-app',
  data: {
    available: false,
    nearby: false
  },
  computed: {
    compClasses: function() {
      return {
        available: this.available,
        nearby: this.nearby
      }
    }
  }
});

In your HTML:

<div v-bind:class="compClasses">
  <span>Ryu</span>
</div>

<button v-on:click="nearby = !nearby">Toggle Nearby</button>
<button v-on:click="available = !available">Toggle Available</button>

The div's classes are now managed by the compClasses computed property.
Each button toggles an independent data property.
When a data property changes, the computed property automatically re-runs and returns a new class object, which Vue uses to update the DOM.

Introduction to Dynamic Classes with v-bind

How gang and welcome to your 10th Vue.js tutorial. And in this video, we're going to talk about Dynamic CSS. Okay then, so in previous tutorials, we've already seen data binding. We can say v-bind and then bind to a particular attribute on a HTML element such as href or value. Then we can control the value of those attributes via the Vue instance itself, right? Now, we can do the same kind of thing with classes because at the end of the day, class is just a HTML attribute, right? We can say class equals something. So we can bind to this HTML attribute and we're going to go through two examples to illustrate this.

So first of all, example one, I'm just going to do a simple div. And then we'll say v-hyphen-bind as we would normally to bind to an attribute, and then this time we're binding to class, right? Only this time, this right here expects an object. So curly braces, that is an object. This has got nothing to do with template syntax where we do two of them, this is just one curly brace for an object.

Using an Object to Control Classes

And then inside here we have a series of key and value pairs. Now the key is going to be the class name and the value is going to be a boolean, either true or false. And if it's true, then this element will have that class. If it's false, it won't. Okay? For example, if we want this to have a class of red, we'd say red is true, makes sense. And if we check this out now in a browser, then it should have a class of red, which it does.

If we say false, then it won't have a class of red. So you can see this update right here should remove that class. And we can add more than just one. We can say blue and that's going to be true. And by the way, these are comma-delimited. You can see that comma right there. If we save this, now it should have a class of blue, which it does, and they can both be true or both be false. So if I make this true, then it should have a class of red and blue. Cool.

So that's all very good, but at the end of the day, this is not really very dynamic, is it? We're not driving this via the Vue instance, we're just putting true here for both of them, right? It's kind of hardcoded if you like. If we were to do this, we could just get rid of v-bind altogether and just say red blue. So we want to make this a little more dynamic.

Binding a Class to a Data Property

Let's get rid of red and blue classes first of all. And I want to give this a class of available, but I want it to depend on this property right here that I've already created, available. So when this is false on the Vue instance, then I don't want it to get that class. When it's true, I do want it to get that class. Right?

So since we have access to that property on the data right here, we can say available is going to be available, right? So the class available right here is going to be either true or false because this refers, this one here, to this thing right here. So currently it's false, it's not going to get that class. So if we save it and check it out in a browser, then currently it shouldn't have that class. But if we change this to true, then it should get that class, you see.

Example 1: Toggling a Class on Click

And let's illustrate this a little better by adding a click event to this. In fact, what we'll do first of all is add a span in here, right? And this is going to be the name of someone, let's say it's a taxi driver. And when this has a class of available, this taxi driver is going to be styled green because green means available. And when it's not got a class of available, it's going to be styled red. Now first of all, we need those classes. So I'm just going to head to my repository on my other screen and copy those classes. You can get those as well by going to the repo, the link's down below. It's the branch which is lesson 10.

So if we paste those in here, you can see that it's styling a span by default as a background of red. Yeah. When it has that available class attached to the surrounding element, then the span has a background of green. Okay?

So if we save that, now what I want to do is add a click event to this. So we say v-on and then click and then what we're going to do is say available is equal to exclamation mark available. And what this does is reverse what available is currently. So if it's currently true, then this negation operator turns it to false, right? And if it's false, it turns it to true. So it's going to keep swapping it when we click on this thing right here. So if we check this out in the browser now, currently it's true because by default it's true, but when we click this, it's going to change that to false. It goes to red and we remove that class. Click it again, we add that class because now it's true. Click it again, it becomes false, etc. and it's styling differently. So we've got some kind of dynamic classes going on there so we can style things differently depending on user interaction with the web page, which is really cool.

Managing Multiple Classes with Computed Properties

Okay, so that's a really simple example. I want to show you something which is more complicated but really not complicated at all. So let me comment this dude out and come underneath. Example two.

So we're going to do something very similar, but this time what we're going to do is pass in this whole object from the Vue instance instead of writing out the object there. Remember I said we could have a list of different classes. So say we've got a list of five classes, we don't want to be writing them all in the HTML. That doesn't make sense; it becomes very ugly and hard to update. If instead we had this object defined here, then that would become much easier.

And what we're going to do is define that object right here in the computed properties, right? So this is going to be called compClasses, right? So computed classes, that stands for. And this is going to be a function, and it's going to return to us an object, because at the end of the day, that's what we're expecting here, an object. This is what we want to return. So it's going to return an object which is going to contain two key-value pairs, these two things right here. So a class of available and a class of nearby. Let's change this to false. So they're both false to begin with.

So if we return, we want to return an object, and the first property inside the object we want to return is available, which is going to be this.available, which refers to this thing right here. Yeah, this.available refers to this property on the data object. And then the second one we want to pass through is nearby, and this is going to be this.nearby. Okay, so we're returning this object, which is going to be either true or false depending on what these are right here, and we can control these by listening to events, click events, that kind of thing.

Example 2: Computed Properties in Action

So now let's return this object in an element somewhere. Let's go over here and come below to Example Two. And what I'm going to do is say div v-bind is on the class and it's equal to compClasses, right? So this compClasses is this computed property right here. So it's going to look at this, and it's going to return this object. And every time one of these two changes, this is going to run again and return the updated object, right? With the values updated. So it's returning that right here. So if we save this now, in fact, we'll just add in this span again, Ryu. Okay.

So if we save this now and check it out, then currently if we inspect, it's got none of those classes attached to the div, right? Because they're both false in here. They're both false. So let's add some click events to change those. So the first thing I want to do is add a couple of buttons, right? And the first button is going to say 'Toggle nearby'. So that's going to toggle this thing right here and change it to true or false. And the second button, if I just copy this and paste it down below, is going to 'Toggle available'. So it's going to toggle the other property right here, available, between true and false. Okay. So to do that, we need to add those click events, don't we? We need to say v-on and then click is equal, and then we can fire something here. Now we want to do the same kind of thing as we did before, except we're doing it with nearby here. So if I say nearby equals exclamation nearby, then that is going to toggle this between true and false. If we do the same here, v-on:click is equal to... and I just copied that a minute ago, so I'll paste it in. Then we're toggling this one as well. So now if I go over here, I can say 'Toggle available' and this works, and you can see that if we inspect, you can see in the classes. So it gets the available class and this 'Toggle nearby' means now we get this little nearby thing, which is controlled by this CSS. You can see if we have a class of nearby, then we apply this ::after pseudo-element to the span where we add some nearby content in. Okay, so that's where that's being driven from. So you can see over here, we get a class of nearby and this nearby text appears, right? And when we toggle available, it all becomes green. So very good, that is how we can dynamically use classes inside this Vue instance right here and output them and bind them to the class attribute on HTML elements.