Imp t挑战者ゔ图3？

Question

有一个计算保证金的公式。我这里的问题是，当我不输入数字时，在 z value.How 中返回 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>

Answer 1

正如评论所建议的那样，您应该像这样尝试，下面的代码按您预期的方式工作。

     <template>
      <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
        v-model="marginResult"
        />
      </div>
    </div>
  </form>

<script>
 export default {
  data() {
  return {
  purchasePrice: '',
  salePrice: '',

   }
  },

  methods: {
    isNumber(e) {
    if (e.keyCode < 48 || e.keyCode > 57) {
        e.preventDefault();
    }
    }
    },

computed: {
    marginResult() {
        return (this.salePrice - this.purchasePrice).toFixed(2);
    }
},

}
</script>

Screenshot for you to check if code works or not

opp 你期待空白 returns 0.00 但你明白了。

Imp t挑战者ゔ图3？

Input NaN in Vue3?

javascript

typescript

vue.js

vuejs3