O'Reilly logo

Vue.js 2.x by Example by Mike Street

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Changing CSS classes

As with any HTML attribute, Vue is able to manipulate CSS classes. As with everything in Vue, this can be done in a myriad of ways ranging from attributes on the object itself to utilizing methods. We'll start off adding a class if the user is active.

Binding a CSS class is similar to other attributes. The value takes an object that can calculate logic from within the view or be abstracted out into our Vue instance. This all depends on the complexity of the operation.

First, let's add a class to the cell containing the isActive variable if the user is active:

      <td v-bind:class="{ active: person.isActive }">        {{ activeStatus(person) }}      </td>

The class HTML attribute is first prepended by v-bind: to let Vue know it needs ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required