typescript - Agregar una clase bajo una condición

Me gustaría agregar una clase específica bajo una condición con Vue.js.

Tengo 2 valores en mi DataStore así (TypeScript):

value1: 0 as number,
value2: 0 as number

Y con este valor, en mi plantilla, me gustaría agregar las clases:

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

así:

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

¿Alguien tiene alguna idea de cómo hacerlo?

Respuesta #1

Para renderizar clases dependiendo de las condiciones, puedes pasar un objeto a la directiva de clase. Renderizará aquellas claves del objeto como nombres de clase que tengan un valor true.

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

Vea la documentación: https://v2.vuejs.org/v2/guide/class-and-style.html

Respuesta #2

puedes usar una condición simple con un ternario y la directiva :class:

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

Solo si value1 es igual a value2 se aplica la clase azul, si no, la roja.