修改input的值 如何做到不闪烁

Question

获取input的value 要求用户输入不符合规格的时候不予显示；例如只能数输入小数点后两位 常用的想法是 输入到第三位的时候删掉后面那位，比如我现在用的vue 通过v-model获取到input值 然后@input过滤一下 在赋值给v-model的绑定值，但是这个过滤的过程 会有一个删除的闪烁过程，就是先渲染到屏幕上在消失，请问各位有什么好方法处理吗 不限于vue 谢谢了

Answer 1

用keyup/input事件

原生是这样的:

let inp = document.querySelector("input");

inp.onkeyup = inp.oninput = function(ev) { if (inp.value.length >= 3) {

inp.value = inp.value.substr(0, 3); } };

vue 的话，不用v-model 绑定，改为:

<template>

<input :value ="inptxt" @input="input">

</template> 
<script> 
exports default {

data(){    return {
        inptxt:""
    }
},
methods: {
    input(){        if(this.inptxt.length > 3) {            this.inptxt = this.inptxt.substr(0,3);
        }
    }
}

} 
</script>