小弟小白一枚，最近在学习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>
请各位大神指点一下，这种情况代码应该如何修改，小弟基础薄弱，请多指教，感谢
哆啦的时光机
相关分类