javascript - Vue.js - 具有内联样式绑定(bind)的动态进度条

<分区>

我正在构建一个进度条，它将根据“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>
...

这个方法逻辑怎么可能？

最佳答案

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

<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
}

关于javascript - Vue.js - 具有内联样式绑定(bind)的动态进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44451427/

相关文章：

javascript - 检查数组是否为单调序列