小弟小白一枚，最近在學(xué)習vue.js,寫了3個輸入框做自動求和,現(xiàn)在可以實現(xiàn)對第一列輸入框做自動求和。現(xiàn)在想到一個需求，在每個輸入框下面顯示對應(yīng)的數(shù)值區(qū)間，如下圖所示：

這樣就可以知道每一個group所在的區(qū)間范圍，比如第一個group在[0 ~ 10%), 第二個group在[10% ~ 30%).
小弟現(xiàn)在沒有什么思路，寫了一些代碼如下：

<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>
        //如何在輸入框下顯示每次相加后的數(shù)值，而不是所有輸入框數(shù)值的求和？
        //在這里寫{{sum}}得到的是所有輸入框數(shù)值的和，和需求不符合
        <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);
        },
        

        //自己嘗試寫的計算區(qū)間初始值的代碼，有問題，請大神指教
        // previous_sum = sum - current_inputValues
        // 我的思路是，區(qū)間的初始值=之前幾個輸入框的累加值 - 當前輸入框的輸入值
        // 區(qū)間的尾值就是當前幾個輸入框得到的累加值
        previous_sum(){
          var previous_sum = 0;
          this.inputValues.forEach((item)=>{
            previous_sum = sum - parseFloat(item.percentage);
          })
        }
      }
    }
</script>

請各位大神指點一下，這種情況代碼應(yīng)該如何修改，小弟基礎(chǔ)薄弱，請多指教，感謝