Javascript Vue.js-具有内联样式绑定的动态进度条

我正在构建一个进度条，它将根据“v-for”列表源数据更改背景颜色。数据为：（从0到10的属性）

我试过这个：

<div class="card-bar-sun"> //Main grey bar
  <span :style="{ width: calc(plant.sun * 10) + '%'}"></span>
</div>
...

//主灰条
...

---

这个方法的逻辑怎么可能呢？

我没有完全理解你的问题。如果您只是在寻找计算百分比的方法，您可以使用以下方法：

<div class="card-bar-sun"> 
  <span v-for="plant in plants" :style="{'width': calcBar(plant) + '%'}"></span>
</div>

<div class="card-bar-sun"> 
  <span v-for="plant in plants" :style="{'width': calcBar(plant) + '%'}"></span>
</div>

calcBar(plant) {
   //or more complicated stuff
   return plant.sun *10
}