VUE項目中對偽類動態設置樣式

vue項目中動態改變css樣式，通過style寫css樣式的方式:style="{color:blue}"這種，但是可能會存在一個問題，這個style只是針對當前節點的樣式進行修改，我如果還有其他節點樣式或者偽類，這時候vue的style方式就沒辦法實現了（可能是我未了解到），所以我通過動態設置css的方式去控制css樣式

以動態設置一個color為例

在css相關節點中初始化一個變量樣式

--my-color:blue;

在對應class中使用這個變量

.elementStyle{
    color: var(--my-color);
}

這個時候elementStyle節點的color顏色已經是由--my-color這個變量控制了，我們只需要在使用的時候去賦值就可以

<div>
    <span class="elementStyle" :style="setStyle()">我是一個節點</span>
</div>
···
##下面是一個vue的方法
setStyle(){
    return {
        '--my-color': 'red'
    }
}
···
##下面是css樣式
<style lang="scss" scoped>
    --my-color:blue;
    
    .elementStyle{
        color: var(--my-color);
    }
</style>

這樣這個節點樣式就會從藍色變成紅色，這個方式多用於vue的一些偽類情況，我的VUE項目里各種偽類如果需要動態設置樣式的話，就會通過這種方式

備注：最好這個顏色的設置在當前節點或者父節點，不然可能繼承不到這個自己設置的樣式