vue :style 改变 伪元素

通过Vue的`:style`指令，我们可以动态地改变伪元素的样式。通过动态绑定`style`属性，我们可以声明一个CSS变量（例如`--bgColor`），并将变量的值赋给伪元素的背景颜色。例如，在HTML中，我们可以使用以下代码：

<div ref="chart-circle" class="chart-circle" :style="{ '--bgColor': color }"></div>

在CSS中，我们可以使用`var()`函数来读取`--bgColor`变量，并将其作为伪元素的背景颜色。例如：

.chart-circle {
  width: 80px;
  height: 80px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bgColor);
  }
}

这样，当`color`变量的值发生变化时，伪元素的背景颜色也会相应地改变。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue动态设置css样式，设置class以及::before伪元素背景图片](https://blog.csdn.net/qq_40315971/article/details/116303139)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue动态设置::before伪元素样式背景颜色](https://blog.csdn.net/cczz66/article/details/122987795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]