마루님이 MIT로 풀어주신 코드입니다. 메모메모..
<template>
<div :style="cssVariable">
<select v-model="color">
<option value="black">black</option>
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
<div class="example-box" />
</div>
</template>
<script>
import { computed, defineComponent, ref } from "vue";
export default defineComponent({
name: "App",
setup() {
const color = ref("black");
const cssVariable = computed(() => {
return {
"--div-background-color": color.value,
};
});
return {
color,
cssVariable,
};
},
});
</script>
<style scoped>
.example-box {
width: 100px;
height: 100px;
background-color: var(--div-background-color);
}
</style>