uniapp或者微信小程序 对输入框进行拦截不重新渲染（只输入数字拦截成功但是页面不渲染更新）问题解决

效果

问题

@input 事件进行拦截 打印 e.target.value的值变化了，但是页面不重新渲染。
如下例子：
输入 11 e.target.value的值是11
输入11a 正则进行拦截更改 e.target.value的值还是是11
输入11ab 正则进行拦截更改 e.target.value的值还是是11
输入11ab3 正则进行拦截更改 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();
      });
    },
    }