vue.js里用computed属性自动求和，如何在每个输入框下显示对应的数值区间？

Question

小弟小白一枚，最近在学习vue.js,写了3个输入框做自动求和,现在可以实现对第一列输入框做自动求和。现在想到一个需求，在每个输入框下面显示对应的数值区间，如下图所示：这样就可以知道每一个group所在的区间范围，比如第一个group在[0 ~ 10%), 第二个group在[10% ~ 30%).小弟现在没有什么思路，写了一些代码如下：<template>  <div id="app">    <form action="" :model="inputValues">      <br>      <span>Total Percentage: {{sum}}</span>      <div v-for="item in inputValues">        <br>        <input type="text" v-model="item.percentage" placeholder="percentage">        <input type="text" v-model="item.group" placeholder="group">        <br><br>        //如何在输入框下显示每次相加后的数值，而不是所有输入框数值的求和？        //在这里写{{sum}}得到的是所有输入框数值的和，和需求不符合        <span> [{{previous_sum}}% ~ {{sum}}%)</span>      </div>    </form>  </div></template><script>    export default {      data() {        return {          inputValues: [            {              percentage:'',              group:''            },            {              percentage:'',              group:''            },            {              percentage:'',              group:''            }          ]        }      },      computed: {      //对第一列的输入框做自动求和        sum() {          return  this.inputValues.reduce((total,value) => {            return Number.isNaN(parseFloat(value.percentage)) ?              total :              total + parseFloat(value.percentage)          },0);        },                //自己尝试写的计算区间初始值的代码，有问题，请大神指教        // previous_sum = sum - current_inputValues        // 我的思路是，区间的初始值=之前几个输入框的累加值 - 当前输入框的输入值        // 区间的尾值就是当前几个输入框得到的累加值        previous_sum(){          var previous_sum = 0;          this.inputValues.forEach((item)=>{            previous_sum = sum - parseFloat(item.percentage);          })        }      }    }</script>请各位大神指点一下，这种情况代码应该如何修改，小弟基础薄弱，请多指教，感谢

Answer 1

这个 逻辑 无法通过一个计算属性来 搞定，因为对于了三个数据，要么使用3个计算属性，没必要
要么使用方法，把参数传入