oninput和onchange在input框里触发函数的问题

来源:互联网 发布:cms设计文档 编辑:程序博客网 时间:2024/06/18 05:27

    一天改两次bug,每次都有新感觉,今天的问题就是,在input框里实现模糊搜索。由于需求比较复杂,需要动态的做级联和模糊搜索,(本人使用的是vue框架),查阅了网上的资料,在vue中实现模糊搜所时,都是把过滤写在computed中,因为vue中computed在监测到属性变化时就会自动的执行相应的代码,并且还提供了加缓存的方式,是之前对数据的操作一直存在于缓存之中,但是,由于我的实现模糊搜索的数据是一个数组,而computed在官方文档上表示为计算属性,不允许传值,所以就被悲剧了。。。于是我就想在input框中加一个监听事件,当检测到输入变化时,就执行摸个函数,于是,,可坑就来了。。。

    oninput和onchange是原生js里的方法,二者用在input中都可以实现文本框里的内容改变,执行相应的代码,但是二者的区别是触发的时间不一样,onchange触发的时间shi

当前对象属性改变,并且是由键盘或鼠标事件激发的,如果得用JavaScript改变触发对象的属性时, 并不能触发onchange事件,在当前对象失去焦点之后,触发onchange事件,

而oninput事件则是只在对象value值发生改变时奏效

    所以说,当你想实现文本框边输入边触发函数实现模糊搜索时,oninput可以达到你的要求。在vue中,这样使用oninput:

    

 <input type="text" v-model='search' @input = "hello()"/>


原创粉丝点击