webfansplz / vuejs-challenges

Collection of Vue.js challenges
https://vuejs-challenges.netlify.app/
MIT License
2.69k stars 188 forks source link

14 - 动态CSS #2719

Open Ly-TiR opened 2 months ago

Ly-TiR commented 2 months ago
// v-bind in style
<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>
/* Modify the code to bind the dynamic color */
p {
  color: v-bind(theme);
}
</style>
// v-bind in template
 <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>
/* Modify the code to bind the dynamic color */
p {
  color: red;
}
</style>