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

兄弟，我恰好碰到這個問題。代碼裏須要不斷變動CSS裏樣式的值（遍歷+大量），並經過JS進行設置。基本上要求應該是和你差很少的。
以上全部方法我基本都試過，用了一個白天加半個晚上，如今是凌晨三點。

我說一下個人方法，我本身已驗證有效：
一、演示HTML主體結構

 

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

二、首先做用區域範圍內設置「CSS變量」

 

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

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

 

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

---

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