vue动态样式

vue中可以使用:style来进行动态样式绑定，如：

<div class="banner-text"  :style="{ background: `url(${domainInfo.banner_img})`, backgroundSize: 'cover', backgroundPosition: 'center center'}">

但是当要求hover效果也需要进行动态绑定时，上面的写法不能满足，可以将自定义的变量传入style,然后在css中用css变量使用，如：

<div class="banner-text"  :style="styleObj">

private styleObj: any = {
	'--color': '',
	'--color-hover': '',
	'--background': '',
	'--background-hover': '',
}
.banner-text{
    color: var(--color);
    background: var(--background);
    &:hover{
      color: var(--color-hover);
      background: var(--background-hover);
    }
}

这样写后，只需要操作styleObj就可以动态的改变元素的样式