uniapp 模糊搜索(小白必看)

news2024/10/6 0:15:50

实现模糊搜索很简单,按照下面的步骤:

1. 搜索栏

<view class="search-box">
			<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入移交信息" clearButton="auto" bgColor="#F8F8F8"
				cancelButton="none" @input="input" />
		</view>

2.用input 事件获取搜索的内容, 这里用到了 防抖, 把获取到的值 赋值给 this.search

	// 搜索
			input(e) {
				// 清除 timer 对应的延时器
				clearTimeout(this.timer)
				// 重新启动一个延时器,并把 timerId 赋值给 this.timer
				this.timer = setTimeout(() => {
					// 如果 500 毫秒内,没有触发新的输入事件,则为搜索关键词赋值
					this.search = e; // 获取输入的搜索关键字
				}, 500)
			},

  记得在data 里面 添加 search : "  "

3. 使用计算属性, 将原来的数组进行筛选,   获取新的数据 , 绑定到页面渲染数据的地方

	computed: {
			filteredList() {
				return this.getAssetsList.filter((item) => {
					// 根据多种类型来搜索
					return item.deptName.includes(this.search) || item.requestNick.includes(this
						.search) || item.mdeptName.includes(this.search) || item.createTime.includes(this.search)
				})
			}
		},

includes  包含的内容是根据后端返回的数据 来的 ,可以根据搜索的内容进行修改

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1012458.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安卓核心板开发板的操作系统版本有哪些?

安卓核心板也就是安卓主板平台&#xff0c;一般是指芯片主板硬件平台以及系统开发平台的总称。采用ARM应用处理器平台运行google的android智能化操作系统&#xff0c;是将核心功能封装的一块电子主板&#xff0c;集成芯片、存储器和功放器件等&#xff0c;并提供标准接口的芯片…

【天罡传】李星云终成袁天罡?何为不良帅?特立独行的帅气之道

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 随着《画江湖之天罡传》的即将上映&#xff0c;越来越多的小伙伴们开始对这位神秘人物袁天罡产生了浓厚的兴趣。他是剧中一个极具权谋和智谋的角色&#xff0c;也是李星云一直试图摆脱的影子。在这篇文章中&am…

【实例分割】论文详解YOLACT:Real-time Instance Segmentation

&#x1f3c6;论文下载&#xff1a;paper &#x1f3c6;代码下载&#xff1a;code 目录 &#x1f3c6;论文下载&#xff1a;paper &#x1f3c6;代码下载&#xff1a;code 1.&#x1f337;&#x1f337;创新点 2.&#x1f337;&#x1f337;网络结构 2.1&#x1f340;&am…

【数据结构——顺序表】线性表很难嘛?这篇文章能让你轻松掌握顺序表

线性表 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串…。线性表在逻辑上是线性结构&#xff0c;也就是说是连续的一条直线。但是在物理结构上并不一定是连续的&#xff0c;线性表在物理上存储时&#xff0c;通…

创建一个简单的外卖订餐系统

在今天的快节奏生活中&#xff0c;外卖订餐系统已经成为了人们日常生活中不可或缺的一部分。这些系统通过在线点餐和配送服务&#xff0c;为用户提供了便捷的用餐体验。在本文中&#xff0c;我们将创建一个简单的外卖订餐系统&#xff0c;使用Python和Flask框架构建后端&#x…

浅析安防监控系统/AI视频智能分析算法:河道水文水位超标算法应用

传统的水位水尺刻度尺位监测中&#xff0c;所采用的人工读数方式&#xff0c;效率较为低下且 人工成本较高&#xff0c;不利于作业流程的数字化。尽管感应器检测会自动对水位的模拟输入进行筛选&#xff0c;但是由于成本、使用场景要求高、后续日常维护复杂等多种因素&#xff…

电脑文件找回怎么做?文件恢复,就用这3招!

“着急&#xff01;大家伙有什么比较简单的电脑文件找回方法吗&#xff1f;我对电脑不太熟悉&#xff0c;在操作的时候有些文件不知道是被删除了还是丢失了&#xff0c;现在非常需要找回这些丢失的文件&#xff01;” 其实&#xff0c;在使用电脑的过程中&#xff0c;很多电脑用…

学Python的漫画漫步进阶 -- 第十二步

学Python的漫画漫步进阶 -- 第十二步 十二、文件读写12.1 打开文件12.2 关闭文件12.2.1 在finally代码块中关闭文件12.2.2 在with as代码块中关闭文件 12.3 读写文本文件12.4 动动手——复制文本文件12.5 读写二进制文件12.6 动动手——复制二进制文件12.7 练一练12.8 文件读写…

万物目标识别——Detic使用图像级别的监督信号来进行目标检测模型推理(C++/Python)

一、目标识别 1.1 传统目标识别算法 传统目标检测通常将分类&#xff08;确定物体属于哪个类别&#xff09;和定位&#xff08;确定物体的位置&#xff0c;通常使用边界框bbox表示&#xff09;任务耦合在一起。这要求训练数据集中包含每个物体的类别标签以及其对应的bbox位置…

【Proteus仿真】【STM32单片机】智能手环

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 系统运行后&#xff0c;OLED显示温度、心率、加速度极其阈值&#xff1b; 可按下K3键进入阈值设置模式&#xff0c;K1和K2调节对应阈值&#xff0c;K4确定&#xff1b;当检测体温、心率、加速度超出阈值范…

通讯协议介绍CoAP 协议解析

目录 1 通讯协议 2 TCP/IP 网络模型 2.1 TCP协议 2.1.1 TCP 连接过程 2.1.2 TCP 断开连接 2.1.3 TCP协议特点 2.2 UDP协议 2.2.1 UDP 协议特点 3 应用层协议简介 3.1 HTTP 协议 3.2 CoAP 协议 3.3 MQTT 协议 4 CoAP 协议详解 4.1 REST 风格 4.2 CoAP 首部分析 4…

网店怎么进行有效推广?可以试试软文推广

商家在为自己的网店制定推广方案时&#xff0c;不管是从渠道、手段、客户群体哪个方面出发都会面临挑战。传统推广方式成本过高&#xff0c;而宣传效果不一定明显&#xff0c;我们可以试试利用软文推广&#xff0c;成本较低而且推广效果明显。接下来媒介盒子就告诉大家&#xf…

四川玖璨电子商务有限公司:短视频运营理解

短视频运营是一种通过策划、执行和管理短视频内容以达到品牌目标的一项工作。在如今面临信息爆炸的时代&#xff0c;短视频已经成为了吸引用户注意力的一种重要方式。作为一种新兴媒体形式&#xff0c;短视频拥有跨时空、生动有趣、内容丰富的特点&#xff0c;因此得到了越来越…

智能遥测终端机RTU的好处介绍

智能遥测终端机RTU是一种具有高度智能化复合功能的遥测装置&#xff0c;它通过数据采集、通信传输和自动控制等技术&#xff0c;实现对被监测系统的远程监控、数据分析、故障诊断和远程控制。它在工业自动化领域的广泛应用&#xff0c;给自动化程度的提高、成本的下降和生产效率…

Linux 内存泄漏检测的基本原理

一、mtrace分析内存泄露 mtrace&#xff08;memory trace&#xff09;&#xff0c;是 GNU Glibc 自带的内存问题检测工具&#xff0c;它可以用来协助定位内存泄露问题。 它的实现源码在glibc源码的malloc目录下&#xff0c;其基本设计原理为设计一个函数 void mtrace ()&…

开学季ipad手写笔哪款好?平价电容笔牌子排行

随着新学期的临近&#xff0c;随着Apple Pencil的火爆&#xff0c;出现了很多新款的平板电脑的电容笔&#xff0c;也开始在国内上市&#xff0c;有些是品质很高&#xff0c;有些是价位很实惠&#xff0c;而且大部分人都能接受。但是&#xff0c;也存在不少性价比很低的产品。本…

uniapp-video自定义视频封面

uniapp官方文档&#xff1a;video | uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/uni-app-x/component/video.html#video 主要使用到的是poster属性&#xff0c;详细属性可点击上方api进行查看 <video id"myVideo" class"xwlogo&q…

Go基础语法:概述

概述 1 背景 产生原因 Go是Google开发的一种静态、强类型、编译型、并发型&#xff0c;并具有垃圾回收功能的类C编程语言。2009以开源项目的形式发布&#xff0c;2012年发布1.0稳定版本&#xff0c;距今已经十年了。 Go语言之父Pike提到&#xff1a;Go语言是以C为原型&…

Kubernetes源码阅读环境搭建

参考博文&#xff1a;Kubernetes 源码剖析-环境准备 安装Go语言 wget https://studygolang.com/dl/golang/go1.14.10.linux-amd64.tar.gz下载源代码 mkdir /goinstall创建一个存放go语言的编译器等组件存放的目录。 tar -zxf go1.14.10.linux-amd64.tar.gz -C /goinstall…

Vulhub靶场环境搭建

在Ubantu系统上搭建靶场环境 一、ubantu系统准备 1.更新安装列表 sudo apt-get update 2.安装docker.io sudo apt install docker.io 查看是否安装成功 docker -v 3.安装pip 检查pip是否安装 pip -V 安装pip apt install python3-pip 或者 apt install pip 再次检查pip…