Vue3表单数值计算输入为空时结果显示NaN如何改为空白显示

实现利润率计算公式功能时存在异常：采购价x、售价y输入框未输入有效数值时，利润率结果z的输入框会返回NaN值，需要调整逻辑，在未完成有效输入时让结果框保持空白，移除NaN显示。

<form>
  <div class="row">
    <div class="mb-3 col-sm-4 col-xs-12">
      <h6 class="text-dark" for="purchasePrice">x:</h6>
      <input
        type="text"
        class="form-control"
        autocomplete="off"
        v-model="purchasePrice"
        @keypress="isNumber($event)"
      />
    </div>
    <div class="mb-3 col-sm-4 col-xs-12">
      <h6 class="text-dark" for="salePrice">y:</h6>
      <input
        type="text"
        class="form-control"
        autocomplete="off"
        v-model="salePrice"
        @keypress="isNumber($event)"
      />
    </div>
    <div class="mb-3 col-sm-4 col-xs-12">
      <h6 class="text-dark" for="marginResult">z:</h6>
      <input
        type="text"
        class="form-control"
        autocomplete="off"
        disabled
        :value="
          (
            ((parseInt(salePrice) - parseInt(purchasePrice)) /
              parseInt(salePrice)) *
            100
          ).toFixed(3)
        "
      />
    </div>
  </div>
</form>

输入框为空时，parseInt解析空字符串会返回NaN，所有基于NaN的算术运算结果仍为NaN，最终调用toFixed(3)后就会在结果框显示NaN字符串。原有逻辑没有做数值有效性校验，也没有处理售价为0的除零异常，该场景会返回Infinity，同样属于异常显示。

在执行利润率计算前增加合法性校验，只有当采购价、售价均为有效数值，且售价不为0时才执行计算，其余场景返回空字符串即可。

直接修改模板绑定的写法 #

将结果框的:value绑定替换为以下逻辑：

:value="
  (() => {
    const purchaseNum = Number(purchasePrice)
    const saleNum = Number(salePrice)
    // 校验不通过时返回空
    if (!Number.isFinite(purchaseNum) || !Number.isFinite(saleNum) || saleNum === 0) {
      return ''
    }
    return ((saleNum - purchaseNum) / saleNum * 100).toFixed(3)
  })()
"

更优写法（推荐） #

将计算逻辑抽离为Vue计算属性，模板代码更简洁易维护：

1. 在组件的computed中新增计算属性：

computed: {
  marginResult() {
    const purchaseNum = Number(this.purchasePrice)
    const saleNum = Number(this.salePrice)
    if (!Number.isFinite(purchaseNum) || !Number.isFinite(saleNum) || saleNum === 0) {
      return ''
    }
    return ((saleNum - purchaseNum) / saleNum * 100).toFixed(3)
  }
}

2. 模板中结果框的value直接绑定该计算属性：

<input
  type="text"
  class="form-control"
  autocomplete="off"
  disabled
  :value="marginResult"
/>

• 用Number()替代parseInt()转数字，可兼容小数输入场景，parseInt会直接截断小数部分导致计算不准
• 新增售价为0的判断，避免除零导致显示Infinity
• 如果业务要求利润率不能为负，可在校验逻辑中增加saleNum >= purchaseNum的判断，不符合时返回空或者自定义提示

内容的提问来源于stack exchange，提问作者Sponge Coder