Vue 8: Enlaces de clase y estilo
easy⏱ 5 mincoursevue
Sintaxis de objeto para :class
:class="{ active: isActive }" aplica la clase active solo mientras isActive sea verdadera. Podés combinar varios flags en el mismo objeto, e incluso mezclarlo en un array con clases estáticas: :class="[baseClass, { active: isActive }]".
<!-- 'active' is applied only while isActive is true -->
<div :class="{ active: isActive, urgent: isUrgent }">...</div>
<!-- Array syntax combines multiple sources -->
<div :class="[baseClass, { active: isActive }]">...</div>
Sintaxis de objeto para :style
:style toma un objeto de propiedades CSS en camelCase (fontSize, no font-size) mapeadas a valores. Como es simplemente JS, podés calcular cualquier propiedad — color, tamaño, posición — a partir de tu estado reactivo.
<div :style="{ color: textColor, fontSize: size + 'px' }">...</div>
Construí la insignia de estado
Creá un estado reactive con booleanos active y urgent. Enlazá la :class de una insignia a ambos flags, y su :style a un fondo/color que dependa de ellos.