[Vuejs]-Vue.js: condition for class switching

by

2👍

✅

You’ll need to use v-bind to the class passing an object with true/false values, like follows:

<span v-if="getNotificationsUnviewed > 0"
    v-bind:class="{'u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3' : true, 'g-color-primary g-bg-white' : isActive}">
         {{ getNotificationsUnviewed }}
  </span>

Let’s have a look at what’s inside the :class:

{
  "u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3": true,
  "g-color-primary g-bg-white": isActive
}

The first class set will always be there as the value is true, the second will be set only if isActive is true.

Of course, your instance/component must have the isActive prop/data in order for this to work.

See the docs for more info and alternative ways to doing so.

👤Phiter

Leave a comment