vue 实现边输入边搜索功能的实例讲解


Posted in Javascript onSeptember 16, 2018

效果图:

vue 实现边输入边搜索功能的实例讲解

搜索分类2种情况,一般的是当用户输入完,点击确定的按钮在向后发送请求,还有一种就是的我一边输入,一边向后台发送请求,但是会产生一个性能的问题,就是一直发请求造成页面的卡顿,这里就是使用截流函数,当用户每次点击键盘之间超过300ms就发送请求,否则不请求

search.vue

<template>
 <div id="search">
 <input type="text" class="search" placeholder="搜索" v-model.trim="title" />
 </div>
</template>

js:

<script>
// 节流函数
const delay = (function() {
 let timer = 0;
 return function(callback, ms) {
 clearTimeout(timer);
 timer = setTimeout(callback, ms);
 };
})();
export default {
 name: 'search',
 data() {
 return {
  title: '',
  search:[]
 };
 },
 watch: {
 //watch title change
 title() {
  delay(() => {
  this.fetchData();
  }, 300);
 },
 },
 methods: {
 async fetchData(val) {
  const res = await this.fetch({
  url: '写上你的URL',
  method: 'GET',
  params: { title: this.title },
  });
  this.search = res.data.list;
 },
 },
 mounted() {},
};
</script>

以上这篇vue 实现边输入边搜索功能的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue2过滤器模糊查询方法
Sep 16 #Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 #Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 #Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 #Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 #Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 #Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 #Javascript
You might like
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python 内置函数filter
2017/06/01 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python和c语言的主要区别总结
2019/07/07 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python 有效的括号的实现代码示例
2019/11/11 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python对XML文件的操作实现代码
2020/03/27 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
国窖1573广告词
2014/03/21 职场文书
党员承诺书内容
2014/03/26 职场文书
优质服务口号
2014/06/11 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2015年技术员工作总结
2015/04/10 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript