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

Question

我正在构建一个进度条，它会根据＆＃34; v-for＆＃34;来改变背景颜色。列出源数据。数据为：（属性从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
}