14 - 动态CSS-模板写法(Dynamic CSS- template writing)

[Tofu-Xx]

<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 :style="`color:${theme}`">hello</p>
</template>