为了避免代码的耦合，利于后期维护，尽量将功能函数分开来写。 首先是千分符转化 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框进行比较。
