多个input相加计算结果为NaN的处理

为什么会出现NaN?(复现一下)

多个input相加计算结果为NaN的处理_第1张图片

NaN的出现:是因为input框绑定的都是同一个方法导致的。

因为我的需求:购买数量*优惠价(单价)-平台补贴-店铺补贴=实付金额  的实时计算

原因:第一个input输入的时候,相应的其他的input也在进行计算,而这时其他输入框可以由上图可以看出另外两个是undefined,(我计算的数值已经提前进行Number的转换和toFixed(2)j数值精度保留两位小数的处理)。数字和undefined相加为NaN。

这样想来解决方法就很简单了,提前处理一下input框的值就可以。

多个input相加计算结果为NaN的处理_第2张图片

        handleChange(value){
          let _this = this;
          let isNull = validatenull;
          if(isNull(_this.ruleForm.goodsShelvesPrice)){
            _this.ruleForm.goodsShelvesPrice = ''
          }
          if(isNull(_this.ruleForm.platformSubsidyPrice)){
            _this.ruleForm.platformSubsidyPrice = ''
          }
          if(isNull(_this.ruleForm.shopSubsidyPrice)){
            _this.ruleForm.shopSubsidyPrice = ''
          }
          _this.ruleForm.preferentialPrice =(Number(_this.ruleForm.goodsShelvesPrice * _this.ruleForm.buyNumber
           - _this.ruleForm.platformSubsidyPrice - _this.ruleForm.shopSubsidyPrice)).toFixed(2)
          
          console.log(_this.ruleForm.goodsShelvesPrice,'优惠价');
          console.log( _this.ruleForm.buyNumber,'数量');
          console.log(_this.ruleForm.platformSubsidyPrice,'平台补贴');
          console.log(_this.ruleForm.shopSubsidyPrice,'店铺补贴');
          console.log(_this.ruleForm.preferentialPrice,'实付金额');
        },

效果:

多个input相加计算结果为NaN的处理_第3张图片

你可能感兴趣的:(javascript,开发语言,ecmascript,前端,elementui)