如何将 ml 的进水量显示为 n 个图标杯？答案

【问题标题】：How to display water intake from ml as n icons cups?如何将 ml 的进水量显示为 n 个图标杯？
【发布时间】：2020-11-04 22:09:57
【问题描述】：

我正在尝试将计算出的杯子数量显示为杯子图标。一个图标 = 220 毫升。

目标：3.60 升 杯子：16.363636363636363

谁能帮我解决这个问题？我希望它显示为 16 个图标杯。

.col-xl-4.mb-5
           
                p Goal: {{ waterIntake }} litres
                p Cups: {{ cupsIntake }}

waterIntake() {
      var currentWeight = this.goalWeight;
      var water = currentWeight * 0.03;
      let text = water.toFixed(2);
      return text;
    },

cupsIntake() {
        var currentWeight = this.goalWeight;
        var water = currentWeight * 30;
        let litres = water.toFixed(1);
        let cups = water / 220;
        return cups;
      },

【问题讨论】：

我希望它显示为图标一个图标 = 220 毫升。
是的，我想将它显示为杯子图标。

标签： javascript vue.js vuejs2

【解决方案1】：

您可以使用 v-for in range 来呈现图标列表，但您的 cupsIntake() 返回值必须是整数并且 cupsIntake() 必须是计算属性才能使其工作。

<i v-for="cup in cupsIntake" :key="cup" class="fas fa-glass-whiskey" />

将 Math.round 或 Math.ceil（取决于您的业务逻辑）添加到 cupsIntake()

return Math.round(cups);

【讨论】：