14 - Dynamic css values

[cn-2k]

<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)]
}, 1000)

</script>

<template>
  <p>hello</p>

  <!-- <p :style={ color: theme }>hello</p> also works -->
</template>

<style scoped>
/* binding the color prop to theme value */
/* https://vuejs.org/api/sfc-css-features.html#v-bind-in-css */

p {
  color: v-bind(theme);
}
</style>