Vue的style标签块中使用变量动态修改CSS的方法

我想要根据不同的事件去修改页面的样式，也就是修改CSS某些属性。

需求

<template>
    <div>
        <span class="test">文字</span>
    </div>
</template>

<script>
    export default = {
        name: '',
        data() {
            return {
                color: 'red'
            }
        }
    }
</script>

<style scope>
.test {
    color: "这里想使用 data 里面定义的变量"
}
</style>

这里我想要根据不同的事件去修改这里的color属性，并且在页面上显示。

解决方案

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>

几个注意点：

1. 这里的父标签不要用组件的（el-form、el-upload之类），要用自定义的（div之类）
2. this.$refs打印为undefined，自然也无法调用其setProperty()方法，这是因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们，它们还不存在！$refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定。也就是说ref只有等页面加载完成好之后你才能调用this.$refs，解决办法：如果写在method中，那么可以使用this.$nextTick(() => {})等页面渲染好再调用

参考

• 怎么在vue的style标签里面使用变量？
• 关于vue 的 this.$refs 打印为undefined解决办法