scss中直接获取js变量

<div class="demo1">
    <button v-for="(item, index) in btns" :key="index" @click="onBtnClick(item.bgColor, item.textColor)">{{ item.title }}</button>
    <div>
        <div class="example">Hello World</div>
    </div>
</div>

const btns = [
    { title: '红色主题', bgColor: '#FF9191', textColor: '#FF0000' },
    { title: '蓝色主题', bgColor: '#B3C4FF', textColor: '#042BA9' },
    { title: '默认主题', bgColor: '#333333', textColor: '#FFFFFF' }
]
const bgColor1 = ref()
const textColor1 = ref()
const onBtnClick = (bgColor: string, textColor: string) => {
    bgColor1.value = bgColor
    textColor1.value = textColor
    console.log(bgColor, textColor)
}

.demo1 {
    padding: 10px;

    .example {
        display: inline-block;
        padding: 20px 50px;
        color: v-bind('textColor1');
        background: v-bind('bgColor1');
    }
}