uniapp または WeChat アプレットが再レンダリングせずに入力ボックスをインターセプトします (入力数値のみが正常にインターセプトされますが、ページはレンダリングおよび更新されません) 問題は解決されました

効果

質問

@input イベントは、e.target.value の値が変更されたことをインターセプトして出力しますが、ページは再レンダリングされません。
次の例:
入力 11、e.target.value の値は 11、
入力 11a、通常のインターセプト、e.target.value または 11 の値を変更、
入力 11ab 通常のインターセプト、e.target.value の値を変更または 11、
「11ab3 Regular Intercept」と入力して e.target.value の値を 113 に変更します。
これは、インターセプト後の値は変更されておらず、ページは再レンダリングされないためです。

解決

  <input
      class="input"
      type="text"
      placeholder="请输入价格"
      :value="pItem.price"
      @input="handleOnlyNumbersInput($event, pItem, 'price')"
    />
    //data中的属性
    nowNum: 0
    //methods中的handleOnlyNumbersInput函数
    methods:{
    
    
    // 现在只输入 数字
    handleOnlyNumbersInput(e, item, key) {
    
    
      let input = e.target.value;
      const regex = /^[0-9.]*$/; //数字包括小数点
      if (!regex.test(input)) {
    
    
        // e.target.value = input.replace(/[^\d.]/g, '');
        input = input.replace(/[^\d.]/g, '');
        this.nowNum++;
        //来回切换更改 input 值 是为了 使得input内容变化从而使页面渲染
        if (this.nowNum % 2 == 0) {
    
    
          this.$set(item, key, input + ' ');
        } else {
    
    
          this.$set(item, key, ' ' + input);
        }
        if (this.nowNum >= 100000) {
    
    
          this.nowNum = 0;
        }
      }
      this.$nextTick(() => {
    
    
        this.$set(item, key, input);
        // this.$forceUpdate();
      });
    },
    }