vue 动态修改组件style中的参数

CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，具体的自己去了解吧，这里就不详解了。

以背景颜色为例：

html：

<template>
    <div class="father" ref="bgcolor">
        <div class="child">
            动态修改style中的参数
        </div>
    </div>
</template>

css：

<style>
.father {
    /* --变量名：默认值 */
    --variable： #fff;
}
.child {
    background-color: var(--variable);
}
</style>

js：

<script>
export default {
    props: {
        bgColor: String
    },
    mounted() {
        this.$refs.bgcolor.style.setProperty("--variable", this.bgColor);
    }
}
</script>

大概就是这样，js内容的话是可以根据需求修改的，例如说按下按钮修改之类的~