关于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 相关文章推荐
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
javascript数组的使用
Mar 28 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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跳转页面的几种实现方法详解
2013/06/08 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
Python实现的字典值比较功能示例
2018/01/08 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
pandas.cut具体使用总结
2019/06/24 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
联谊活动策划书
2014/01/26 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
地方课程教学计划
2015/01/19 职场文书
员工表扬信怎么写
2015/05/05 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
体育委员竞选稿
2015/11/21 职场文书