vue实现边输入边搜索功能的实例讲解 - 行业资讯 - 肥雀云

搜索分类2种情况,一般的是当用户输入完,点击确定的按钮在向后发送请求,还有一种就是的我一边输入,一边向后台发送请求,但是会产生一个性能的问题,就是一直发请求造成页面的卡顿,这里就是使用截流函数,当用户每次点击键盘之间超过300毫秒就发送请求,否则不请求

　　　　　　& lt; template> 　　& lt; div id=八阉鳌北? 　　& lt;输入类型=拔谋尽眂lass=八阉鳌闭嘉环?八阉鳌皏模型。修剪="标题"/比; 　　& lt;/div> 　　& lt;/template> 　　　　

　　　　　　& lt; script>//节流函数　　const延迟=(函数(){ 　　让计时器=0; 　　返回函数(回调,ms) { 　　clearTimeout(计时器); 　　计时器=setTimeout(回调,女士); 　　}; 　　}) (); 　　出口默认{ 　　名称:“搜索”, 　　数据(){ 　　返回{ 　　标题:", 　　搜索:[] 　　}; 　　}, 　　看:{//看标题改变　　标题(){ 　　延迟(()=比;｛　　this.fetchData (); 　　},300); 　　}, 　　}, 　　方法:{ 　　异步fetchData (val) { 　　const res=等待this.fetch ({ 　　url:“写上你的url”, 　　方法:“得到”, 　　参数:{标题:这个。标题}, 　　}); 　　这一点。搜索=res.data.list; 　　}, 　　}, 　　安装(){}, 　　}; 　　& lt;/script> 　　之前　　　　

以上这篇vue实现边输入边搜索功能的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。