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

根据防抖节流而实现的，至于用防抖还是节流根据自己需求。

<template> <input type="text"  v-model.trim="sse"></template><script>const delay = (function () { let timer = 0 return function (callback, ms) {  clearTimeout(timer)  timer = setTimeout(callback, ms) }})()export default { name : 'search', watch : { sse () { delay(() => {    this.search()   }, 500)},methods ：{ search () {    this.$axios     .get([url])     .then(response => {      // success     })     .catch(error => {      // error      alert('失败！')     })}}}}</script>

知识点扩展：

关于各种Vue UI框架中加载进度条的正确使用

这里拿MUSE UI 中的进度条举例

  <mu-circular-progress :size="40" class="icon" v-if="isloading"/>  <div v-show="!isloading">   <p>内容</p>  </div>//数据初始化 data () {  return {   isloading: false  } }, //页面加载之前 mounted () {   this.isloading = true   this.$axios    .get([     '/api/playlist/detail?id=' +      this.$route.params.id    ])    .then(response => {     // success     // console.log(response.data)     this.name = response.data.playlist.name     this.list = response.data.playlist.tracks     this.isloading = false    })    .catch(error => {     // error     alert('失败！')     console.log(error)    })  }

页面加载之前this.isloading = true

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

当获取数据完毕后

this.isloading = false

进度条消失，页面显示

总结

以上所述是小编给大家介绍的关于vue项目中搜索节流的实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对IIS7站长之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！