uniapp 模糊搜索(小白必看)

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

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.timerthis.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.mzph.cn/news/79282.shtml

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

相关文章

SpringMvc决战-【SpringMVC之自定义注解】

目录 一、前言 1.1.什么是注解 1.2.注解的用处 1.3.注解的原理 二.注解父类 1.注解包括那些 2.JDK基本注解 3. JDK元注解 4.自定义注解 5.如何使用自定义注解&#xff08;包括&#xff1a;注解标记【没有任何东西】&#xff0c;元数据注解&#xff09;&#xff1f; 三…

Linux下使用lookbusy加载cpu负载

Lookbusy 是一个用于在 Linux 系统上生成合成负载的简单应用程序。它可以在 CPU 上生成固定的、可预测的负载&#xff0c;保持选定数量的内存处于活动状态&#xff0c;并生成您需要的任意数量的磁盘流量。 官方地址&#xff1a;lookbusy -- a synthetic load generator 编译 …

Article Forge:AI写作文章内容生成器

【产品介绍】 名称 Article Forge 成立/上线时间 2022年 具体描述 Article Forge是一款基于人工智能和深度学习的AI写作文章内容生成器&#xff0c;可以自动写出1500字的文章无论是产品描述&#xff0c;还是整篇博客文章&#xff0c;Article Forge都能在一…

堆与栈的区别

OVERVIEW 栈与堆的区别一、程序内存分区中的堆与栈1.栈2.堆3.堆&栈 二、数据结构中的堆与栈1.栈2.堆 三、堆的深入1.堆插入2.堆删除&#xff1a;3.堆建立&#xff1a;4.堆排序&#xff1a;5.堆实现优先队列&#xff1a;6.堆与栈的相关练习 栈与堆的区别 自整理&#xff0c;…

竞赛 基于机器视觉的车道线检测

文章目录 1 前言2 先上成果3 车道线4 问题抽象(建立模型)5 帧掩码(Frame Mask)6 车道检测的图像预处理7 图像阈值化8 霍夫线变换9 实现车道检测9.1 帧掩码创建9.2 图像预处理9.2.1 图像阈值化9.2.2 霍夫线变换 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分…

video 视频编解码一些debug方法

文章目录 一、通过命令去获取一些数据1.2 确定我们xml配置文件: 二、查看我们芯片支持的编码能力三、通过log去获取信息 这个文章的主要内容是为了后期性能方面的debug, 设计到前期的bringup则没有 一、通过命令去获取一些数据 获取媒体相关的参数&#xff1a; # getprop |…

Thinkphp6 配置并使用redis图文详解 小皮面板

这篇文章主要介绍了Thinkphp6 配置并使用redis的方法,结合实例形式详细分析了Redis的安装、配置以及thinkphp6操作Redis的基本技巧,需要的朋友可以参考下 一、安装redis ThinkPHP内置支持的缓存类型包括file、memcache、wincache、sqlite。ThinkPHP默认使用自带的采用think\Ca…

SpringMVC之自定义注解

目录 一.什么是Java注解 1.简介 2.注解的分类 3.JDK元注解 二.自定义注解 1.自定义注解的分类 1.1.标记Annotation: 1.2.元数据Annotation: 2.如何使用自定义注解 3.案例演示 3.1 获取类、方法及属性上的注解值 3.2Inherited 的使用 3.3获取类属性上的注解属性值 3.…

springboot整合mybatis

一、项目结构展示 二、开始整合 1、引入pom依赖 进入Maven中央仓库选择自己所需要的依赖&#xff0c;maven仓库地址&#xff1a;Maven Central 完整Maven依赖如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"h…

markdown工具Atom预览与插件安装

​atom是以命令行作为插件选项的入口 打开命令输入框 Windows: ctrl shift p Mac: command shift p 输入命令安装 输入 markdown preview toggle &#xff0c;可以偷懒只输入mdpt(模糊匹配) 按enter键即可看到预览&#xff0c;如图&#xff0c;左边编辑&#xff0c;右…

Vue中的过滤器 Filters

过滤器 Filters 过滤器一般用于格式化文本内容&#xff0c;通常可以在两个地方使用&#xff0c;主要是模板语法、以及 v-bind 表达式中。例如我想对展示的文本进行一些特殊处理&#xff0c;将金额进行四舍五入后再展示。选项 filters 内可以编写多个自定义过滤器。 用法&…

LightDB 23.3 通过GUC参数控制commit fetch

背景 commit游标提交之后&#xff0c;可以继续使用fetch进行结果集的操作。commit和fetch结合使用功能开发时不考虑分布式。后续&#xff0c;又对分布式进行了测试&#xff0c;发现持有portal后&#xff0c;代码中会对querydesc进行非空判断。当querydesc为空时&#xff0c;Li…

工业交换机常见的硬件故障有哪些?

工业交换机常见的硬件故障主要是由于受到供电电源、室内温度、室内湿度、电磁干扰、静电等机房环境的影响&#xff0c;造成工业交换机电源、背板、模块、端口等部件出现故障。具体可以分为以下几类。 1.电力供应故障&#xff1a; 由于外部供电不稳定、电源线路老化或雷击等原因…

LiveNVR监控流媒体Onvif/RTSP功能-支持海康摄像头海康NVR通过EHOME协议ISUP协议接入分发视频流或是转GB28181

LiveNVR支持海康NVR摄像头通EHOME接入ISUP接入LiveNVR分发视频流或是转GB28181 1、海康 ISUP 接入配置2、海康设备接入2.1、海康EHOME接入配置示例2.2、海康ISUP接入配置示例 3、通道配置3.1、直播流接入类型 海康ISUP3.2、海康 ISUP 设备ID3.3、启用保存3.4、接入成功 4、相关…

亚马逊封买家账号的原因有哪些

亚马逊可能封锁买家账号的原因有多种&#xff0c;主要是出于保护市场和维护平台秩序的考虑。以下是一些可能导致亚马逊封锁买家账号的常见原因&#xff1a; 1、涉及违规行为&#xff1a;如果买家违反了亚马逊的使用政策&#xff0c;如发表虚假评价、滥用退货政策、欺诈或盗窃等…

【视觉SLAM入门】7.3.后端优化 基于KF/EKF和基于BA图优化的后端,推导及举例分析

"时间倾诉我的故事" 1. 理论推导2. 主流解法3. 用EKF估计状态3.1. 基于EKF代表解法的感悟 4. 用BA法估计状态4.1 构建最小二乘问题4.2 求解BA推导4.3 H的稀疏结构4.4 根据H稀疏性求解4.5 鲁棒核函数4.6 编程注意 5.总结 引入&#xff1a; 前端里程计能给出一个短时间…

markdown学习笔记

markdown学习笔记 1.文字&#xff08;依靠HTML&#xff09; 1.1文字缩进-空格转义符 单字符空&#xff1a;&emsp; 半字符空&#xff1a;&ensp;1.2文字对齐 「居中&#xff1a;」<center> 居中 </center> or <p align"center"> 居中 …

吃瓜教程第一二章学习记录

当大多数人听到 "机器学习 "时&#xff0c;他们会联想到机器人&#xff1a;一个可靠的管家或一个致命的终结者&#xff0c;这取决于你问谁。但是&#xff0c;机器学习并不只是未来主义的幻想&#xff0c;它已经存在了。事实上&#xff0c;在一些特殊的应用中&#xf…

upload-labs文件上传漏洞通关

一、环境搭建 upload-labs是一个使用php语言编写的&#xff0c;专门收集渗透测试和CTF中遇到的各种上传漏洞的靶场。 下载地址&#xff1a;https://github.com/c0ny1/upload-labs/releases 在 win 环境下 直接解压到phpstudy下即可 二、通关 &#xff08;一&#xff09;16关…

使用凌鲨进行聚合搜索

作为研发人员&#xff0c;我们经常需要在多个来源之间查找信息&#xff0c;以便进行研发工作。除了常用的搜索引擎如百度和必应之外&#xff0c;我们还需要查阅各种代码文档和依赖包等资源。这些资源通常分散在各个网站和文档库中&#xff0c;需要花费一定的时间和精力才能找到…