Modificar estilos CSS de forma dinámica en Vue.js es posible gracias a las directivas style y class, que permiten enlazar atributos visuales a tus datos reactivos. Si ya dominas componentes y reactividad, este es el siguiente paso para construir interfaces que respondan al estado de tu aplicación sin escribir código repetitivo.

Cómo funcionan los estilos reactivos en Vue.js

Vue.js te ofrece dos directivas principales para manejar estilos de forma declarativa: style y class. Ambas se conectan al sistema de reactividad, así que cuando cambia una variable, los estilos se actualizan en pantalla automáticamente.

Para mostrarlo, partimos del ejemplo de una puerta que se abre y se cierra con un botón [00:55]. La meta es simple: cuando la puerta esté cerrada, el fondo se pone rojo, y cuando esté abierta, verde. Suena trivial, pero detrás hay varias formas de resolverlo.

¿Qué son los estilos reactivos en Vue.js? Son estilos CSS que cambian automáticamente cuando cambia el estado de tu componente, sin manipular el DOM manualmente. Vue.js sincroniza la vista con tus datos usando las directivas v-bind:style y v-bind:class.

Cómo usar v-bind:style con un objeto en Vue.js

La primera ruta es enlazar el atributo style a un objeto JavaScript. Declaras una variable, por ejemplo styles, como un objeto cuyas propiedades son atributos CSS escritos en camelCase: backgroundColor en lugar de background-color [03:35].

Luego, en el template, conectas ese objeto al elemento con v-bind:style (o su forma corta :style). Algo así:

html

<div :style="styles">...</div>

javascript data() { return { styles: { backgroundColor: '#ef4444' } } }

Un detalle importante: como es un objeto JSON, los valores deben ir como cadenas de texto entre comillas [04:40]. Olvidarlo es un error muy común al empezar.

Cómo modificar estilos con JavaScript de forma reactiva

Una vez enlazado el objeto, puedes mutarlo desde cualquier parte de tu lógica. En el ejemplo, dentro de un watcher que escucha el cambio de la variable open, asignamos this.styles.backgroundColor a verde cuando la puerta abre y a rojo cuando cierra [05:35]. Vue.js detecta el cambio y actualiza la vista al instante.

Esta técnica funciona, pero ensucia tu JavaScript con valores de color repartidos por todo el código. Ahí entra la segunda opción.

Cómo enlazar clases dinámicas con v-bind:class

En lugar de manejar cada propiedad CSS desde JavaScript, agrupas los estilos en clases CSS y dejas que Vue.js decida cuál aplicar. Esto mantiene el CSS en su lugar y el JavaScript limpio.

Vue.js acepta varias formas de declarar las clases en :class:

• Un array con los nombres de las clases activas: :class="['open']".
• Un objeto donde la clave es el nombre de la clase y el valor es un booleano: :class="{ open: true }".
• Una expresión de JavaScript que devuelva cualquiera de los dos.

¿Cuándo usar style y cuándo class en Vue.js? Usa :style para valores dinámicos calculados al vuelo, como un color que viene de una API. Usa :class cuando los estilos están predefinidos en tu CSS y solo necesitas activarlos según una condición.

Cómo controlar clases con condicionales y variables booleanas

La forma más legible es el objeto con booleanos. Si tienes una variable open, escribes:

html

<div :class="{ open: open, closed: !open }">...</div>

Cuando open es true, se aplica la clase open. Cuando es false, se aplica closed. Vue.js intercambia las clases automáticamente [10:50].

Cómo usar propiedades computadas para clases dinámicas

Cuando la lógica crece, mover la decisión a una propiedad computada hace el código más mantenible. Creas una función computed que devuelve el nombre de la clase, un array o un objeto, dependiendo del estado.

javascript computed: { styles() { return this.open ? ['open'] : ['closed'] } }

Y en el template solo enlazas :class="styles" [12:15]. Un consejo práctico: evita nombrar a tu variable class porque es palabra reservada de JavaScript. Usa algo como styles o cssClasses.

Un detalle que apareció en el ejemplo: si duplicas la opción computed en tu componente, Vue.js solo reconoce una y te dará un error de propiedad no definida. Agrupa todas tus computadas en un solo bloque separado por comas [13:00].

Qué te aporta la reactividad en los estilos

La flexibilidad es total. Puedes resolver el mismo problema con:

• Una variable reactiva en data().
• Una propiedad computada que devuelva el estilo.
• Un watcher que reaccione a cambios.
• Un método invocado desde el template.

Vue.js no te obliga a una sola forma. Te da el control y, al mismo tiempo, te ahorra escribir manipulación manual del DOM. Tu CSS se vuelve declarativo: describes qué estilos corresponden a qué estado, y la sincronización ocurre sola.

¿Cómo resolverías tú este ejemplo de la puerta? ¿Con :style, con :class, con una computada o con un watcher? Cuéntame en los comentarios qué enfoque te parece más limpio y por qué.