v-model+watch实现输入监听(自动区分输入法)

监听输入事件时,你一定遇到过这样的情况:

在中文状态下向输入框中输入‘地球’二字,在我们按 ‘空格’前,拼音‘diqiu'在按每个字母时都会触发代码执行一次,若处理中存在ajax请求就会出现多次调用的情况。这显然不是我们想要的,我们想要的仅仅是当’地球‘二字输入的时候才会触发代码执行,这难么,难么,难么~~~

其实不难,使用Vue的v-model指令和watch监听,就可以轻松实现,哈哈哈哈,继续吧

直接干货,上菜


<div id="app">

    <input v-model="msg" >

</div>

nev Vue({

    el: '#app',

    data: {

        msg:  ''

    },

    watch: {

        msg(newvalue, oldvalue) {

            console.log(newvalue, oldvalue)
            // 还可以做很多操作哦

         }

    }

})

快动手试试吧。。。

优点总结:

1、对于使用输入法(如中文、日文等)的语言,不会在输入法组合文字过程中更新

2、不用给元素另外绑定监听事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。