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

我完全不理解你的問題。如果你只是在尋找一種方式來calc下的百分比您可以使用此：

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