Modify the value of input so that it does not flicker

getting the value of input requires that the user input is not displayed when it does not conform to the specification.
for example, the common idea that you can only count two decimal places is to delete the last one when you enter it to the third place. For example, the vue I use now gets the input value through v-model and then @ input filters the bound value assigned to v-model. However, in this filtering process, there will be a flicker process of deletion, that is, rendering to the screen first and disappearing. Do you have any good ways to deal with it? it"s not limited to vue. Thank you

.
Vue.js javascript
Apr.29,2022

use keyup/input events

Native is like this:

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

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

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

vue, instead of v-model binding, change to:

< 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 >

Previous: After playing part of WeChat Mini Programs's video, he got stuck and kept loading.

Next: Ask for help. The newly installed ubuntu18.04 can find wifi, but it can't connect it.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu