New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

14 - 动态CSS #2851

Open

CodeZzhang opened this issue Dec 10, 2024 · 0 comments

Labels

CodeZzhang commented Dec 10, 2024

第一种方法

<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>

<style scoped>
p {
  color: var(--color)
}
</style>

2.第二种方法

<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>
</template>

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

CodeZzhang added answer zh-CN labels

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment