<!--普通style-->
1、演示HTML主体结构
<div class="header" ref="mycolor" @click="func">
<div class="header-info"></div>
</div>
2、首先作用区域范围内设置“CSS变量”
<style>/*在header区域内设置 CSS变量--bccolor */
.header {
--bcColor: #ffffff;
}
/*在子元素中使用该变量*/
.header-info
background-color :var(--bcColor);
</style>
3、在JS中通过setProperty()方法修改“--bcColor”的值，从而间接改变对应子元素的（background-color）背景颜色
<script>
methods:{
func () {
this.$refs.mycolor.style.setProperty("--bcColor",'white');
}
}
</script>
另一种方式实现动态改变style中元素背景图
例：项目中循环从接口拿来的背景图片路径