and desgin Vue页面,使用watch监视, ＜a-input＞内的值, 自动计算出填入框的值,用vue中watch监听input组件的变化

本文链接：https://blog.youkuaiyun.com/weixin_64038862/article/details/125632843

博客主要讲述了设计Vue页面时，运用watch对<a-input>内的值进行监视，从而自动计算出填入框的值，涉及前端Vue和JavaScript相关技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

and desgin Vue页面,使用watch监视, <a-input>内的值, 自动计算出填入框的值

 <a>------输入[税率]与[价税合计]------</a></a-divider
          >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item :label="'税率 %'" prop="tax">
                <a-input-number
                  style="width: 100%"
                  v-model="deductionsData.tax"
                  :disabled="disabledFlag"
                  :min="0"
                  :max="100"
                  :step="1"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                  placeholder="请输入税率"
                />
              </a-form-model-item>
            </a-col>
             <a-col :span="8">
              <a-form-model-item
                :label="'价税合计¥ '"
                prop="deductionsAmountTotal"
              >
                <a-input-number
                 style="width: 100%"
                 :min="0"
                 :step="1"
                  v-model="deductionsData.deductionsAmountTotal"
                  :disabled="disabledFlag"
                   placeholder="请输入价税合计"
                >
                </a-input-number>
              </a-form-model-item>
            </a-col>      
          </a-row>
          <a-divider
            style="padding-right: 700px; margin-top: -20px; font-size: 13px"
            ><a>------计算得出[税额]与[未税金额]------</a></a-divider
          >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item :label="'税额 ¥'">
                <a-input-number
                  v-model="deductionsData.deductionsTaxAmount"
                  :disabled="disabledFlag"
                  :readOnly="true"
                  :precision="4"
                   />
              </a-form-model-item>
            </a-col>
             <a-col :span="8">
              <a-form-model-item :label="'未税金额 ¥'" prop="deductionsAmount">
                <a-input-number
                  style="width: 100%"
                  v-model="deductionsData.deductionsAmount"
                  :disabled="disabledFlag"
                  :readOnly="true"
                  :precision="4"
                />
              </a-form-model-item>
            </a-col>
          </a-row>

  watch: {
   
    //价税合计 = 未税金额 + 税额
   //         = 未税金额 + 未税金额*税率
    "deductionsData.tax"(val) {
      console.log("aaaa", val);
      // this.deductionsData.deductionsAmountTotal =
      //   Number(this.deductionsData.deductionsAmount) +
      //   Number((this.deductionsData.deductionsAmount * val) / 100);
    //未税金额计算:
    this.deductionsData.deductionsAmount = Number(
      this.deductionsData.deductionsAmountTotal / (1+(val/100))
    )
     console.log('🚀 ~ this.deductionsData.deductionsAmount', this.deductionsData.deductionsAmount)
     //税额计算:
      this.deductionsData.deductionsTaxAmount = Number(
        this.deductionsData.deductionsAmountTotal - this.deductionsData.deductionsAmount
      )
    }
  }