vue 控制css伪类 动态显示颜色

在写uniapp的时候用到的

<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)" :style="{'--my-color': bgcolor}">
    <text class="u-line-1">{{item.name}}</text>
</view>

重点 :style="{'--my-color': bgcolor}"

computed: {
    bgcolors() {
        return this.$store.state.bgcolor;
    }
},
watch: {
    bgcolors(newColor) {
        this.bgcolor = newColor
    }
},

这里我用到vuex了，通过监听来动态改变值

.u-tab-item-active::before {
    content: "";
    position: absolute;
    border-left: 4px solid var(--my-color);
    height: 32rpx;
    left: 0;
    top: 25rpx;
}

重点：border-left: 4px solid var(--my-color); --my-color是html中提到的