我们经常会遇到这种需求，现在我们用百度搜索的时候，他们的想法也是一样的

根据防抖和节流，至于防抖还是节流，根据你自己的需要。

模板输入类型=' text ' v-model . trim=' SSE '/templatescriptconst delay=(function(){ let timer=0 return function(callback，ms){ cleartime out(timer)timer=setTimeout(callback，ms) }))()导出默认值{ name : 'search '，watch : { SSE(){ delay(()={ this。search ()}，500)}，方法：{search () {this。$ axios。获取([网址])。然后(响应={//成功})。catch(error)})} } } } }脚本知识点扩展：

在各种Vue UI框架中如何正确使用加载进度条

以MUSE UI中的进度条为例

mu-circular-progress : size=' 40 ' class=' icon ' v-if=' is loading '/div v-show='！Isloading' pcontent /p /div//data初始化数据(){ return { isloading: false } }，//mounted () {this。isloading=truethis。$ axios . get(['/API/playlist/detail？id=' this。$route.params.id ])。然后(response={//success//console . log(response . data)this . name=response . data . playlist . name this . list=response . data . playlist . tracks his . is loading=false })。catch(错误={//erroralert('失败！')console . log(error)})} this . is loading=true在加载页面之前

V-show='false '不显示页面

当数据被获取时，

this.isloading=false

进度条消失，页面显示

摘要

以上是边肖介绍的vue项目中搜索节流的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！