vue style before

在Vue中，可以使用动态绑定的方式设置CSS样式中的:before伪元素的背景图片。通过在Vue中声明一个变量，比如"--bgColor"，然后将这个变量的值赋给:before的background-color属性，就可以实现动态设置伪元素:before的背景图片。例如，在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);
  }
}

而在Vue组件中，可以通过动态绑定style属性来声明CSS变量"--bgColor"，并将变量"color"的值赋给"--bgColor"。例如：

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

这样就能够根据变量"color"的值动态设置伪元素:before的背景图片。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [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_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [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_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]