Cómo usar estilos CSS reactivos con Vue 3
Si utilizas Single File Components para trabajar con Vue 3, puedes usar propiedades y datos reactivos como variables CSS 🔥.
Supongamos que tienes una referencia reactiva llamada color
, donde quieres guardar un color. Para ello, usas la directiva v-model
y asocias la referencia y un input
de tipo color (un colorpicker de toda la vida, vaya). Algo así.
<script setup>
import { ref } from 'vue';
const color = ref('#000000'); // Color default value
</script>
<template>
<div class="wrapper">
<input type="color" v-model="color" />
</div>
</template>
La pregunta, es ¿cómo asociamos ese color a un elemento HTML?.
v-bind
CSS con Vue 3
Aunque hay muchas formas de conseguir nuestro objetivo, con esta nueva sintaxis de v-bind
y CSS en Vue 3 puedes convertir tu referencia/valor reactivo en una variable CSS. Solo tienes que usar v-bind
como valor en tus selectores CSS. Vue se encarga del resto. En nuestro caso sería algo así.
<script setup>
...
</script>
<template>
...
</template>
<style scoped>
.wrapper {
background-color: v-bind(color); /* Link color reference to the background-color CSS property reactively */
}
</style>
De esta forma, cada vez que cambies el color a través del colorpicker, estarás cambiando el valor de la referencia color
y, como la utilizas para calcular el color de fondo, se actualizará instantáneamente.
Estilos CSS reactivos con Vue
Podemos ir más allá: imagina que tienes un objeto reactivo (reactive
) con estilos CSS y quieres aplicar alguno de ellos. Esta nueva sintaxis v-bind
con CSS te permite evaluar expresiones (como la referencia a un objeto) si las envuelves en comillas. Por ejemplo:
<script setup>
import { ref, reactive } from 'vue';
const color = ref('#000000');
const styleObject = reactive({
styles: {
border: '.3rem solid goldenrod',
},
});
</script>
<template>
...
</template>
<style scoped>
.wrapper {
background-color: v-bind(color);
border: v-bind('styleObject.styles.border'); /* Evaluate a JS expression if you wrap it in quotes */
}
</style>
Como ves, nos referimos a una propiedad del objeto reactivo styleObject
y capturamos el valor de una de sus propiedades.
Sencillo, ¿verdad?. Tienes todo el código y una demo aquí. 👈
¿Tienes alguna pregunta sobre Cómo usar estilos CSS reactivos con Vue 3?
Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.