vue输入框在输入值时显示和绑定的变量不一致是怎么回事？

Question

描述

使用输入框input事件绑定输入（因为我要透传多层，在父组件中处理数据，所以没用v-model），在回调函数里面我过滤了value，如果不是数字就不给变量赋值。但是文本框中显示的还是输入的值，过滤的掉的不管用。

下面是绑定事件处理函数

<input type="text" @input="handleInput" :value="inputVal" />

// 回调事件
handleInput(value){
    this.inputVal=value.replace(/\D+/,'');
}

问题

当输入非数字时，比如123abc,inputVal的值是123，但是输入框里面显示的还是123abc，是我的用法有问题吗？

这双向绑定，数据源变了，显示不变，这怎么回事啊？谁能讲讲原理，这不是和提倡的双向绑定违反了吗！！！

Answer 1

handelInput(event) {
      this.inputVal = event.target.value.replace(/\D+/,'');
}

貌似要输入英文后，再输入数字才会去掉英文

Answer 2

最近刚好碰到这个问题，希望可以帮你解答。
我所碰到相同的问题的vue 版本是vue 3.x,2.x 版不确定表现是否一致。
粗暴回答版：
将:value 换为v-model 指令即可。

不生效的原理分析：
作为state 映射到view 的库，按理说双向绑定会将state 值准确的映射到view，但是这里有一个前提，即state 改变，vue 将改变的state 映射到 view（Dom）中。
题主可以想想当输入错误值时，this.inputVal 是否真的被更新了？
我想vue 的diff 算法会比对值是否一致，不一致了才更新。
可以使用以下代码来尝试验证：

this.inputVal = '';
this.inputVal=value.replace(/\D+/,'');

至于为什么v-model 可以又是另一个问题了，或许应该看看指令源码。
仅为推论，仅做参考，希望能解决问题。