vue中input @input校验限制问题

Question

需求是要做一个正整数的限制
原生可以这样写

<input type="text" oninput="value=value.replace(/[^\d]/g, '')" >

这样既可完成，用户在输入小数负号等不符合的情况会直接输入不进去做到无感的限制

---

在vue中有v-model的概念，绑定事件或者v-自定义指令，都会存在有 “撤回” 的感觉

<input type="text" v-model="model" @input="handleChange" >
methods:{
    handleChange(){
        this.model = this.model.replace(/[^\d]/g, '')
    }
}

这样写的话，使用的时候如果输入负号小数点等，用户会先看到负号或小数点，然后会有一个类似 “撤回” 的动作，不符合的字符才会撤回，怎么才能用vue也写成像原生那样无感的校验？求求大佬带一下给个思路

Answer 1

<input v-model="value"/>

...

data: {
    value: ''
},
watch: {
    value (val) {
      if (/\D/.test(val)) {
        this.value = val.replace(/\D/g, '')
      }
    }
  },

这样好像可以

Answer 2

用Number.isInteger(value*1)只能输入正整数

Answer 3

用:value替换v-model，在input事件中判断值是否符合要求，符合则给:value绑定的变量赋值