怎麼在vue的style標籤裏面使用變量？

兄弟，我剛好碰到這個問題。代碼裏需要不斷變更CSS裏樣式的值（遍歷+大量），並通過JS進行設置。基本上要求應該是和你差不多的。
以上所有方法我基本都試過，用了一個白天加半個晚上，現在是凌晨三點。

我說一下我的方法，我自己已驗證有效：
1、演示HTML主體結構

 

<div class="header" ref="mycolor" @click="func">
    <div class="header-info"></div>
</div>

2、首先作用區域範圍內設置“CSS變量”

 

<style>
/*在header區域內設置 CSS變量--bccolor */
 .header {
  --bcColor: #ffffff;
}   
   /*在子元素中使用該變量*/
    .header-info
       background-color :var(--bcColor); 
</style>

3、在JS中通過setProperty()方法修改“--bcColor”的值，從而間接改變對應子元素的（background-color）背景顏色

 

<script>
    methods:{
        func () {
            this.$refs.mycolor.style.setProperty("--bcColor",'white');
        }   
    }
</script>

---

PS:至少在我還清醒之前，註冊上來回答一下，希望能幫到你。