Skip to Content
Learn
Styling Elements with Vue
Classes

As we mentioned earlier, you will use inline styles more often later in your Vue journey when you learn how to use components.

Currently, our Vue apps all live in one file. Filling that file with lots of style rules is likely going to produce difficult to read code. In this case, it is best that we still use CSS classes to keep most of our style information in our CSS files.

Let’s check out how to dynamically add CSS classes instead of inline styles.

<span v-bind:class="{ unread: hasNotifications }">Notifications</span>
.unread { background-color: blue; }
const app = new Vue({ data: { notifications: [ ... ] }, computed: { hasNotifications: function() { return notifications.length > 0; } } }

In this example, we are using the v-bind:class directive to dynamically add a class called unread to a “Notifications” <span> element if the computed property hasNotifications returns true.

v-bind:class takes an object as its value — the keys of this object are class names and the values are Vue app properties that return a truthy or falsy value. If the value is truthy, the class will be added to the element — otherwise it will not be added.

In this example, if there are notifications in the notifications array, the unread class will be added to the “Notifications” element causing the element to be styled blue.

Similar to before with v-bind:style, you can also set the value of v-bind:class to a Vue app property that returns a class object instead of writing the object out in your HTML file.

Instructions

1.

Let’s now try implementing our dynamic styles with classes instead of inline styles to see the strengths and weaknesses of each technique.

We’ll start by implementing our “Confirm Tickets” button again. We’ve already removed the dynamic inline styles you previously incorporated from the code for you.

In style.css, copy the following code to add a CSS rule that will apply the enabled submit button styles we were using earlier to <button> elements with the active class:

button.active { cursor: pointer; background-color: #4c7ef3; }

We will use this class to conditionally style the “Confirm Tickets” submit button when all of the required fields have been filled in correctly.

2.

Now, in index.html, use v-bind:class to conditionally add the active class to the “Confirm Tickets” button when formIsValid is true.

Once you’ve finished running your code, test that the “Confirm Tickets” button still styles as expected. It should start gray with no pointer and then turn blue with a pointer when all of the required fields have been filled out correctly.

Folder Icon

Sign up to start coding

Already have an account?