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

---

theme: fancy

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

该方法分为三步.

data部分:

```

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

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

```

html部分:

<template> <div class="afterdome"> <div class="case1" :style="{ '--color': color,}">凶手是</div> </div> </template> 该部分将data中的变量和下一步中将要在style中定义的变量绑定.

style部分:

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

简单的样例:

```

凶手是

``` 最终效果: