VueJS如何为含:nth-child、calc的复杂样式类绑定动态变量

实现方案 #

你可以通过CSS自定义属性（CSS变量）实现需求，无需修改原有style标签的选择器结构，也能完美适配calc计算规则，操作步骤如下：

1. 替换样式中的固定值为CSS变量 #

将原样式里calc中的固定值50替换为var(--progress-percent, 50)，其中--progress-percent是自定义变量名，后面的50是缺省默认值，未传入变量时会自动生效：

<style>
.progress-card:nth-child(2) svg.my_svg circle:nth-child(2)
{
  stroke-dashoffset:calc(440 - (440 * var(--progress-percent, 50)) / 100);
  stroke:#00ff43;
}
</style>

2. 给对应DOM元素注入变量值 #

只需要在匹配.progress-card:nth-child(2)的DOM元素上，通过行内style设置该自定义变量即可：

• 原生HTML静态写法：

<div class="progress-card" style="--progress-percent: 90;">
  <!-- 原有内部结构保持不变 -->
  <div class="box">
      <div class="percent">
          <svg class="my_svg">
              <circle cx="70" cy="70" r="70"></circle>
              <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="num">
              <h2>90<span>%</span></h2>
          </div>
      </div>
      <h2 class="text">Html</h2>
  </div>
</div>

• Vue动态绑定写法：

<div class="progress-card" :style="{'--progress-percent': 你的进度数值变量}">

• React动态绑定写法：

<div className="progress-card" style={{'--progress-percent': 你的进度数值变量}}>

• 原生JS动态修改写法：

const targetCard = document.querySelector('.progress-card:nth-child(2)')
targetCard.style.setProperty('--progress-percent', 要设置的进度数值)

内容的提问来源于stack exchange，提问作者Adebayo Omolumo