Vue.js - 具有内联样式绑定的动态进度条 [重复]

Question

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

plants: [
    { name: 'Rosemary', sun: 7, water: 3, care: 3 },
    { name: 'Pepper',   sun: 8, water: 4, care: 6 },
    ...
  ]

我试过这个：

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

这怎么可能是方法逻辑？

Answer 1

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

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

Js：

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