Cómo aplicar estilos en línea con :style en Vue.js

Vamos a empezar a ver cómo aplicar estilos a nuestros componentes en Vue.js, empezando por ver el uso de los estilos en línea.

Esto es muy fácil ya que podemos vincular el atributo style con una variable dinámica y reactiva, al igual que haríamos con cualquier otro atributo de un elemento de HTML.

Esto nos permite personalizar la apariencia de los componentes aplicar propiedades CSS directamente a los elementos en función del estado de la aplicación, sin necesidad de definir clases CSS.

Cómo usar :style

La directiva :style nos permite vincular dinámicamente estilos CSS a elementos o componentes. Es decir, que podemos aplicar estilos en función de condiciones, estados o datos reactivos.

<template>
  <div :style="estiloDinamico">Este es un ejemplo de estilo en línea.</div>
</template>

<script setup>
import { ref } from 'vue';

const estiloDinamico = ref({
  color: 'blue',
  fontSize: '18px',
});
</script>

Combinar estilos estáticos y dinámicos

Si tenemos estilos en linea que queremos aplicar siempre (estáticos), junto con otros que queremos poder cambiar dinámicamente con :style, podemos hacerlo así,

<template>
  <div style="padding: 10px;" :style="estiloDinamico">
    Este es un ejemplo de estilos combinados.
  </div>
</template>

<script setup>
import { ref } from 'vue';

const estiloDinamico = ref({
  color: 'blue',
  fontSize: '18px',
});
</script>

Aplicar estilos con un objeto

Podemos vincular múltiples estilos usando un objeto dentro de :style y reemplazando los valores por variables.

<template>
  <div :style="{ color: colorTexto, fontSize: tamañoFuente + 'px' }">
    Este es un ejemplo de estilo en línea.
  </div>
</template>

<script setup>
import { ref } from 'vue';

const colorTexto = ref('blue');
const tamañoFuente = ref(18);
</script>

Estilos dinámicos con propiedades computadas

Si el estilo en línea que queremos aplicar es una expresión más compleja, generalmente es mejor que definamos un método o una propiedad combinada para definir el estilo dinámico.

<template>
  <div :style="estiloDinamicoComplejo">
    Este es un ejemplo de estilo en línea con lógica compleja.
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const esActivo = ref(true);
const tieneError = ref(false);

const estiloDinamicoComplejo = computed(() => {
  return {
    color: esActivo.value ? 'green' : 'red',
    backgroundColor: tieneError.value ? 'yellow' : 'transparent',
  };
});
</script>

Ejemplos prácticos

<template>
  <button :style="{ backgroundColor: esActivo ? 'green' : 'red' }" @click="toggleEstado">
    {{ esActivo ? 'Activo' : 'Inactivo' }}
  </button>
</template>

<script setup>
import { ref } from 'vue';

const esActivo = ref(true);

function toggleEstado() {
  esActivo.value = !esActivo.value;
}
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id" :style="{ backgroundColor: item.activo ? 'yellow' : 'transparent' }">
      {{ item.nombre }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, nombre: 'Item 1', activo: true },
  { id: 2, nombre: 'Item 2', activo: false },
  { id: 3, nombre: 'Item 3', activo: true },
]);
</script>