14 - Dynamic css values

[AngelVillalobosS]

Before read my solution, I want let you know that I found in other reply that you can use the following solution.

p{
color: v-bind(theme);
}

instead of my solution.

Theres is my solution:

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

const theme = ref("red");

const colors = ["blue", "yellow", "red", "green"];

setInterval(() => {
  theme.value = colors[Math.floor(Math.random() * 4)];
  console.log(theme.value);

}, 1000);
</script>
<template>
  <p :style=" { color: theme}">Hello</p>
</template>

<style scoped>

p {
  color: red;
  font-size: xx-large;
}
</style>