需求:给tips设置动态color
方法1 动态style
重复代码有一点点多~
方法2 setProperty
- 用ref给外层容器标记引用信息
<div class="banner_page" ref="bannerPage">
- 在style中声明变量
.banner_page { --tipsColor: #f08b40; }
- 在mounted给style中的变量赋值(注意:操作DOM的代码要放在mounted后)
this.$refs.bannerPage.style.setProperty('--tipsColor', this.tipsColor)
- 引用:
.tips { color: var(--tipsColor); }