A partir de la versión 3.2 de Vue, podemos hacer uso de las variables reactivas y propiedades de objetos dentro de nuestros estilos, con la directiva v-bind. En este artículo, veremos un ejemplo de uso de v-bind en un componente de Vue.

Qué es v-bind y cómo utilizarlo en VueJS

V-bind es una directiva de vuejs (incluida en versiones anteriores del framework) que se utiliza para vincular una propiedad de un elemento HTML a una propiedad de una instancia de Vue, como por ejemplo:

<input v-bind:value="message" />

Aunque, aunque en general, se suele utilizar su abreviación, emitiendo la palabra v-bind y escribiendo únicamente los dos puntos:

<input :value="message" />

Utilizar v-bind en CSS

Desde la versión 3.2 podemos hacer uso de esta directiva dentro de los estilos de nuestros componentes, dándole reactividad a estos. Veamos un ejemplo:

<template>
  <div>
    <select v-model="color">
      <option default value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="yellow">Yellow</option>
    </select>
    <span class="background-text">{{ color }}</span>
  </div>
</template>

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

const color = ref("red");
</script>

<style>
.background-text {
  background-color: v-bind(color);
}
</style>

En este ejemplo, podemos ver lo siguiente:

  • En el template, tenemos un select enlazado a la variable 'color', y que cambiará su valor al seleccionar una de las 3 opciones. También tenemos un span con la clase 'background-text' que da color al fondo del span, en el que se mostrará el valor de la variable 'color'.

  • En el script, declaramos una variable reactiva llamada 'color', que en un principio tendrá el valor 'red'.

  • Y por último, en el estilo, tenemos una clase 'background-text' con la propiedad de CSS 'background-color', en la que utilizamos la directiva v-bind para darle el valor de la variable reactiva 'color'. Cada vez que la variable cambie su valor, también cambiará la propiedad 'background-color' de la clase.

Conclusión

Con esta nueva funcionalidad de v-bind, podemos cambiar el estilo de nuestro componente de una forma mucho más sencilla; con solo una línea de código.