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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
总结对比php中的多种序列化
2016/08/28 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
如何真正的了解python装饰器
2020/08/14 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
linux面试题参考答案(4)
2013/01/28 面试题
中介公司区域经理岗位职责范本
2014/03/02 职场文书
研究生导师评语
2014/12/31 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
Android Studio 计算器开发
2022/05/20 Java/Android