关于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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 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 implode()函数用法讲解
2019/03/08 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Mac安装python3的方法步骤
2019/08/09 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
司仪主持词两篇
2014/03/22 职场文书
电子商务专业求职信
2014/07/10 职场文书
食品安全汇报材料
2014/08/18 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
依法行政工作汇报
2014/10/28 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
电力工程合作意向书
2015/05/11 职场文书
母亲节感言
2015/08/03 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
银行工作心得体会范文
2016/01/23 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书