CODEWITHSUNDEEP
typescriptvue.js
Antoine Kurka
Antoine Kurka

Reputation: 322

Add a class on a condition

I would like to add a specific class on a condition with vue js.

I have 2 values in my DataStore like this (TypeScript):

value1: 0 as number,
value2: 0 as number

And with this value, in my template, I would like to add the classes:

blue--text if value1 == value2
or
red--text if value1 != value2

like this:

<p class="blue--text">{{ value1 }}</p>
or
<p class="red--text">{{ value1 }}</p>

Do someone have any idea how to do it?

Upvotes: 2

Views: 877

Answers (2)

Reynicke
Reynicke

Reputation: 1550

To render classes depending on conditions you can pass an object to the class directive. It will render those keys of the object as class names, that have a true value.

<p 
  :class="{
    'blue--text': value1 == value2,
    'red--text': value1 != value2
  }"
>
    {{ value1 }}
</p>

See the documentation: https://v2.vuejs.org/v2/guide/class-and-style.html

Upvotes: 2

wittgenstein
wittgenstein

Reputation: 4462

you can use a simple condition with a ternary and the :class directive:

<p :class="value1 === value2 ? 'blue--text' : 'red--text'">{{ value1 }}</p>

Only if value1 is equal to value2 the blue class is applied, if not the red one.

Upvotes: 0

Related Questions