Open Ly-TiR opened 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>