动态样式

动态设置背景颜色

在 Vue 3 中，你可以使用动态绑定的方式来设置元素的背景颜色。 首先，确保你的样式中定义了 CSS 变量，然后通过 Vue 的数据绑定将其应用到元素上。

以下是一个示例：

<template>
  <div :style="{ '--custom-bg-color': dynamicBackgroundColor }">
    <!-- Your content goes here -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const dynamicBackgroundColor = ref('red'); // 初始颜色，你可以根据需求修改

// 在某个事件或条件下修改颜色
const changeBackgroundColor = () => {
  dynamicBackgroundColor.value = 'blue'; // 修改为想要的颜色
};
</script>

<style scoped>
div {
  background-color: var(--custom-bg-color);
  /* 其他样式 */
}
</style>

这里，dynamicBackgroundColor 是一个 ref，你可以在组件中修改它的值， 然后通过动态绑定 :style 将其应用到元素的 --custom-bg-color CSS 变量上。 这样，当 dynamicBackgroundColor 改变时，背景颜色也会相应地改变。