vue 输入框 限定输入金额的范围并且用千分符显示，初始值有格式限制

为了避免代码的耦合，利于后期维护，尽量将功能函数分开来写。
首先是千分符转化
comdify(n) {
let re = /\d{1,3}(?=(\d{3})+$)/g;
let n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {
return s1.replace(re, "$&,") + s2;
});
return n1;
}
将千分符格式的金额数字转化成普通格式的数字
delcommafy(num){//去除千分位中的‘，’
num = num.toString();
num = num.replace(/,/gi, '');
return num;
}
input框增加@blur事件 触发格式化函数
minValue 限制输入框的最小金额 ,代表<=
maxValue 限制输入框的最大金额，代表>=
names 每个输入框传入值的名字 例如 v-model=’amount’
callback 此回调函数需要传入Boolean值，如果是true代表需要将此input框内的值，进行千分符转换，如果是false，则代表不需要进行转换 ，直接return 返回即可。
小提示：methods里边的函数，因为this的指向都是vue挂载的实例。所以避免使用箭头函数，因为箭头函数会改变this。详细请 （参照阮一峰的js标准教程）
` show_number(minValue, maxValue, names, callback){
if (names == ‘amount’) {
if (!this.items.amount || parseFloat(this.items.amount) == ‘0’) {
loadingTip.show(‘请输入要求范围的金额’, 1000)
this.items.amount = ”;
return;
}
} else {
if (!this.items[names] || parseFloat(this.items[names]) == ‘0’) {
this.items[names] = ‘0.00’;
return;
}
}
if (this.items[names] && parseFloat(this.items[names]) != ‘0’) {
if (!isNaN(parseFloat(this.delcommafy(this.items[names])))) {
let itemValue = parseFloat(this.delcommafy(this.items[names]));
console.log(this.delcommafy(this.items[names]))
if (itemValue >= minValue && itemValue <= maxValue) {
this.items[names] = Number(this.items[names]).toFixed(2);
if (callback) {
this.items[names] = this.comdify(Number(itemValue).toFixed(2));
}
} else {
loadingTip.show(‘请输入要求范围的金额’, 1000);
this.items[names] = ”;
return;
}
} else {
loadingTip.show(‘请输入正确的金额’, 1000);
this.items[names] = ”;
return;
}
}

} `

关于函数内部使用 中间值进行存储并转化，原因是：在input框输入内容后，@blur事件触发后，会对内容进行格式化，并填到相应的输入框中。注意 因为输入框内容进行改变之后，又会触发input的blur事件，此时取到的值是输入框的值（经过千分符转换的值）。在进行转换过程中，会转换成NaN.所以使用中间值itemValue 将第一次进行转换的值进行存储，利用转换这个中间值对input框进行比较。