Skip to Content
Learn
Styling Elements with Vue
Class Arrays

As was the case when we were applying style objects, sometimes we need to apply multiple class objects to a single element. To accommodate this, v-bind:class can take an array as its value.

This array can take class objects as its contents and will apply the classes to the element in the order of the class objects in the array. However, this array can also take one other type of element.

While class objects are good for conditionally adding classes to elements, sometimes we need to just add a class to an element regardless of conditions. When this is the case, you can add the class name to the array and it will always be applied to the element. These class names must be stored as properties on your Vue app.

Let’s clarify this with an example:

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

In this code, we have modified our previous example by changing the value of v-bind:class to be an array. We then added a Vue app property to the end of the array that will add the menu-item class to the element. The object at the beginning of the array will still conditionally add the unread class based on whether there are unread notifications. However, we now always add the class stored at menuItemClass, menu-item, to our “Notifications” element.

Using an array with v-bind:class is useful for adding non-conditional classes, like the menu-item class above, in addition to our conditional classes. We can also use this array to add multiple class objects like we did with our inline style objects earlier in the lesson.

Instructions

1.

Let’s try using a v-bind:class array to style the three states of our “Email” input field ( untouched, touched, and invalid) and style the field as a required field.

First, let’s add all of our necessary classes to our CSS file. In style.css, add the following CSS classes to style each state of our input fields:

input.required { border-width: 2px; } input.touched { border-color: #bdbcbc; } input.invalid { background-color: #ffeded; border-color: #da5252; }
2.

Next, we’re going to add two properties to our Vue app. We want to always add the required class to our “Email” field regardless of the state it’s in. Therefore, we need a Vue app property that will store the class name to use with v-bind:class. However, this property will not require any other information to compute, so we can simply store it on data.

In app.js, add a data property to your Vue app called requiredFieldClass with a value of the string 'required' (the name of the class).

3.

Next, we will add a Vue app property that will return a class object that will determine whether or not to add the touched and invalid classes to our “Email” field.

In app.js, add a computed property called emailClasses with a value of the following function:

function() { return { touched: this.email.length !== 0, invalid: this.email && !this.emailIsValid }; }

This code will make the value of emailClasses a class object that will add the touched class if anything has been written in the “Email” field and will add the invalid class if an invalid email has been written in the “Email” field.

4.

Finally, let’s use v-bind:class to add the class values from these two properties to our “Email” field.

In index.html, use v-bind:class with an array to add the classes stored in the requiredFieldClass and emailClasses properties to the “Email” <input> field.

After you’ve finished running your code, check that the “Email” field still styles as you expect. It should start with a light gray border and a white background, then should have a red border and background when you type into it, and finally should have a darker gray border and a white background when you type an @ into the field. Additionally, the border on this field should be slightly thicker than other fields at all times.

Folder Icon

Sign up to start coding

Already have an account?