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）背景颜色

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

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

//html 示例<div :style="getStyle()"></div>//medthods 示例getStyle(){return 'color:red' }