data部分:

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

或者使用props去接受父组件的数据.

props: {
        color: {
             type: string,  //类型判断
             default: "red",   //默认值
         }
     },

html部分:

<template>
    <div class="afterdome">
        <div class="case1" :style="{ '--color': color,}">凶手是</div>
    </div>
</template>

该部分将data中的变量和下一步中将要在style中定义的变量绑定.

style部分:

<style>
.case1 {
    color: var(--color);

}

定义与用法

其中var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

语法

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

:root

:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用. var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

<style>
:root {
  --main-bg-color: red;  
}

#div1 {
  background-color: var(--main-bg-color);
  padding: 5px;  
}

#div2 {
  background-color: var(--main-bg-color);
  padding: 5px;
}

#div3 {
  background-color: var(--main-bg-color);
  padding: 5px;
}
</style>

这样就可以将它们的样式绑定,实现一个样式更改,其他样式也更改的效果.

简单的样例:

<template>
    <div class="afterdome">
        <div class="case1" :style="{ '--color': color}">凶手是</div>
    </div>
</template>

<script>
export default {
    name: 'Case',
    data() {
        return {
            name: "小明",
            color: "red",
        }
    },
}
</script>

<style>
.case1 {
    color: var(--color);

}


</style>

最终效果:

vue组件中在style标签中如何使用变量