vue的style标签里面设置变量
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'
}
更多推荐
已为社区贡献33条内容
所有评论(0)