vue的style标签里面设置变量

1、在style里面添加变量

*适用于组件统一调整样式

//html 
<div class="headerBox">
    <p class="headerContent"></p>    
</div>

//style
<style>
	/*在headerBox区域内设置CSS变量--bgc */
	.headerBox{
	  --bgc:#ffffff;  
	}
	 /*在子元素中使用该变量*/
	.headerContent{
	  background-color:var(--bgc);  
	}
</style>

也可以在JS中通过setProperty()方法修改“–bgc”的值，从而间接改变对应子元素的（background-color）背景颜色

//methods
this.$refs.mycolor.style.setProperty("--bgc",'white');

2、style内联样式中添加方法

//html 示例
<div :style="getStyle()"></div>

//medthods 示例
getStyle(){
  return 'color:red'  
}