我正在处理Vue中的一个练习问题，其中我必须制作一个 colored颜色 Select 器，然后更改页面的背景以匹配所 Select 的 colored颜色 .问题是，我需要设置动态的背景，但我不知道如何从一个组件改变它的css.以下是我掌握的代码:
<!-- App.Vue -->
<script setup>
import { ColorPicker } from 'vue-accessible-color-picker';
import { ref, computed, watch } from 'vue';
const color = ref('hsl(270 100% 50% / 0.8)');
function updateColor(e) {
color.value = e.cssColor
}
const setColor = computed(() => {
return 'background: ' + color.value
})
</script>
<template>
<div :style="setColor">
<ColorPicker :color="color" @color-change="updateColor" />
</div>
</template>
下面我在我的模板中更改div的样式，但它看起来只是这样:
不仅如此，只有当我判断元素时，方块才会出现.
当我try 更改的CSS背景时，我得到的背景:var(--7a7a37b1-COLOR)， colored颜色 没有改变.这是我为了时尚而这样做的时候:
<style>
html {
background: v-bind('color');
}
</style>
如何使整个页面的背景更改以匹配 colored颜色 Select 器的 colored颜色 ？