关于vue项目中搜索节流的实现代码


Posted in Javascript onSeptember 17, 2019

关于vue项目中搜索节流的实现代码

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

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

<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项目中搜索节流的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery中live方法的重复绑定说明
Oct 21 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
Vue的生命周期操作示例
Sep 17 #Javascript
小程序两种滚动公告栏的实现方法
Sep 17 #Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 #Javascript
react native 仿微信聊天室实例代码
Sep 17 #Javascript
Vue 自定义指令功能完整实例
Sep 17 #Javascript
JS扁平化输出数组的2种方法解析
Sep 17 #Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 #Javascript
You might like
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
跟我学Laravel之路由
2014/10/15 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
js实现日历的简单算法
2017/01/24 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
python批量复制图片到另一个文件夹
2018/09/17 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python线程信号量semaphore使用解析
2019/11/30 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
法律专业自我鉴定
2013/10/03 职场文书
精神文明建设标语
2014/06/16 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
英文邀请函
2015/02/02 职场文书
优秀大学生自荐信
2015/03/26 职场文书