vue 实现边输入边搜索功能的实例讲解
作者:zhooson 发布时间:2024-06-05 09:16:42
标签: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>
来源:https://blog.csdn.net/Zhooson/article/details/78933252
0
投稿
猜你喜欢
- 一、模块简介Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档
- 本文实例为大家分享了python实现通讯录系统的具体代码,供大家参考,具体内容如下一、首先,给大家看一下这个系统的主菜单效果如下:二、步骤分
- 那么什么这两个到底有什么区别和联系呢?我在网上搜了一下,发现很多说法,虽然大同小异,但是似乎只有下面这一段来自微软网站的比较高度抽象,而且意
- I. Strict Mode阐述根据 mysql5.0以上版本 strict mode (STRICT_TRANS_TABLES) 的限制:
- 这个微信版网页版虽然繁琐,但是不是很难,全程不带加密的。有兴趣的可以试着玩一玩,如果有兴趣的话,可以完善一下,做一些比较有意思的东西。开发环
- <script language="javascript"><!-- var&n
- SQLServer分页方式附带50万数据分页时间[本机访问|已重启SQL服务|无其他程序干扰][非索引排序]环境 WIN7 SQL服务12.
- 自己写的小工具,可以直接获取csdn文章并转换为markdown格式效果图核心代码from PySide2.QtWidgets import
- 简介集合对象 set 是由具有唯一性的可哈希对象组成的无序多项集,如 list 不能哈希因此,不能作为 set 的一项。set 的常见用途包
- 一、介绍如果在Python中需要对用户输入的密码或者其他内容进行加密,首选的方法是生成hash值。在Python中可以利用二个模块来进行:&
- 前言异常值是指样本中的个别值,也称为离群点,其数值明显偏离其余的观测值。常用检测方法3σ原则和箱型图。其中,3σ原则只适用服从正态分布的数据
- Python中有以下几个基本的数据类型:整数 int字符串 str浮点数 float集合 set列表 list元组 tuple字典 dict
- 使用conda和pip批量安装Python包在debug Yolov5之前,需要按照其txt文件中指定的包的版本来指定安装工程需要的Pyth
- gzip 是什么东东呢?百科跟我们说gzip是GNU zip的缩写,它是一个 GNU 自由软件的文件压缩程序。…gzip 的基础是 DEFL
- 本文实例讲述了PHP中Static(静态)关键字功能与用法。分享给大家供大家参考,具体如下:1、什么是static?static 是C++中
- 问题描述在我们做项目中,常见的是横向表格,但是偶尔的需求,也会做竖向的表格。比如下图这样的竖向表格:我们看到这样的效果图,第一时间想到的是使
- 关于 HTTP 协议HTTP(即超文本传输协议)是现代网络中最常见和常用的协议之一,设计它的目的是保证客户机和服务器之间的通信。HTTP 的
- 1、需求分析首先我们打开地图搜索“鸿星尔克”:复制该链接到浏览器,发现这是一个json格式的数据集。
- 一、利用xpath进行(全程使用)driver.find_element_by_xpath()二、代码部分与图片内容打开淘宝网站,点击登录,
- 《Patterns for Sign Up &Ramp Up》很早就读完了,之所以今天才写读后感,细细读完了发现,它更为接近吸引注册