The correct way for Vue condition to add a css class

Question

What is the correct way to add a css class decided by a condition in Vue:

<div class={{current == key ? ' is-active' : '' }}> Page title</div>

Ohgodwhy · Accepted Answer · 2019-12-18 03:08:43Z

6

<div :class="{'is-active': current === key }">

You just use an object where each class you desire is the key, and the value is the comparator.

answered Dec 18, 2019 at 3:08

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md. Jahidul Islam · Accepted Answer · 2019-12-18 06:06:10Z

1

This is the most convenient way to me, you can add multiple classes using conditions

<div :class="[current === key ? 'is-active' : '', otherClassCondition ? 'other-class' : '']">

answered Dec 18, 2019 at 6:00

Md. Jahidul Islam

3162 silver badges14 bronze badges