怎么在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:至少在我还清醒之前，注册上来回答一下，希望能帮到你。