Vue3 模糊搜索筛选

Vue3 模糊搜索筛选

环境: vue3+ ts+element plus
目标: 输入框输入内容,对展示的列表进行模糊搜索筛选匹配的内容。
在这里插入图片描述
代码如下:

<div style="margin-top: 50px"><el-input v-model="valueInput" size="large" style="width: 200px" placeholder="请输入" @keyup="searchFn"></el-input><ul><li v-for="item in valList">{{item}}</li></ul>
</div>
<script lang="ts" setup>
import {computed, ref} from 'vue'const list=['adfn','acddfN','23DNF','n3BF7','3bedf']
const valList = ref([])
const valueInput=ref('')
const searchFn =computed(() => {valList.value = []list.forEach((item: any) => {if (item.search(valueInput.value)!== -1) {valList.value.push(item)}})
})
</script>

输入内容:
在这里插入图片描述
注意:此时搜索是区分大小写的,接下来改造一下,让输入框搜索可以不区分大小写进行筛选
改造代码如下:

const searchFn =computed(() => {valList.value = []list.forEach((item: any) => {/* RegExp对文本进行模式匹配的“搜索和替换”功能  i就是执行不区分大小写的匹配 */if (item.search(new RegExp(valueInput.value, 'i'))!== -1) {valList.value.push(item)}})
})

效果:
在这里插入图片描述

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

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

相关文章

纸质书籍OCR方案大揭秘,快来看看有哪些神奇的黑科技

随着数字化时代的来临&#xff0c;纸质书籍逐渐被电子书所替代。在将纸质书籍转换为电子格式的过程中&#xff0c;扫描电子书目录并进行文字识别&#xff08;OCR&#xff0c;Optical Character Recognition&#xff09;成为了一项重要的工作。OCR技术能够将纸质书籍中的文字内容…

【开发篇】十六、SpringBoot整合JavaMail实现发邮件

文章目录 0、相关协议1、SpringBoot整合JavaMail2、发送简单邮件3、发送复杂邮件 0、相关协议 SMTP&#xff08;Simple Mail Transfer Protocol&#xff09;&#xff1a;简单邮件传输协议&#xff0c;用于发送电子邮件的传输协议POP3&#xff08;Post Office Protocol - Versi…

基于SpringBoot的学生选课系统

基于SpringBoot的学生选课系统的设计与实现&#xff0c;前后端分离 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 前台主页 登录界面 管理员界面 教师界面 学生界面 摘要 学生选课系统…

Electron笔记

基础环境搭建 官网:https://www.electronjs.org/zh/ 这一套笔记根据这套视频而写的 创建项目 方式一: 官网点击GitHub往下拉找到快速入门就能看到下面这几个命令了 git clone https://github.com/electron/electron-quick-start //克隆项目 cd electron-quick-start //…

Spring Cloud OpenFeign 性能优化的4个方法

OpenFeign 是 Spring 官方推出的一种声明式服务调用和负载均衡组件。它的出现就是为了替代已经进入停更维护状态的 Netflix Feign&#xff0c;是目前微服务间请求的常用通讯组件。 1.超时设置 OpenFeign 底层依赖Ribbon 框架&#xff0c;并且使用了 Ribbon 的请求连接超时时间…

使用4090显卡部署 Qwen-14B-Chat-Int4

使用4090显卡部署 Qwen-14B-Chat-Int4 1. Qwen-Agent 概述2. Github 地址3. 创建虚拟环境4. 安装依赖项5. 快速使用6. 启动 web 演示7. 访问 Qwen 1. Qwen-Agent 概述 通义千问-14B&#xff08;Qwen-14B&#xff09; 是阿里云研发的通义千问大模型系列的140亿参数规模的模型。…

【Java】类和接口的区别

1. 类和类的继承关系&#xff08;一个类只能单继承一个父类&#xff0c;不能继承n多个不同的父类&#xff09; 继承关系&#xff0c;只能单继承&#xff0c;但可以多层继承 2. 类和接口的实现关系&#xff08;一个类可以实现n多个不同的接口&#xff09; 实现关系&#xff0c;可…

从零开始的C++(五)

1.类和对象的补充 当对象是const修饰的常量时&#xff0c;形参中的this是隐含的&#xff0c;那么该如何写函数才能传常量对象呢&#xff1f;如果还是按照正常的方式写&#xff0c;则会出现实参是const修饰的&#xff0c;形参没有&#xff0c;出现了权限的扩大&#xff0c;无法…

开发工具箱 —— it-tools

文章目录 开发工具箱 —— it-tools安装访问效果 开发工具箱 —— it-tools 安装 docker 安装教程&#xff1a;在 CentOs7 中安装宝塔面板和 Docker&#xff08;包括MySQL&#xff0c;Redis&#xff09; docker 安装命令 docker run -d --name it-tools --restart unless-st…

012-第二代硬件选型

第二代硬件选型 文章目录 第二代硬件选型项目介绍重新换平台缘由X86 && Arm 架构切换 ARM Linux 硬件选型系统确定Qt 版本确定总结一下 关键字&#xff1a; Qt、 Qml、 Arm、 X86、 linux 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QM…

浏览器技巧:谷歌浏览器六个实用设置小技巧,值得收藏

目录 1、确保你的浏览器启用标准保护选项 2、使用安全DNS&#xff08;DNS over HTTPS&#xff09; 3、网站通知修改为"静态指示方式" 4、启用页面预加载提升网页加载速度 5、阻止Chrome浏览器在后台运行 6. 更改 Chrome 启动后打开方式为"上次打开的网页&…

Android---字节码层面分析Class类文件

Java 提供了一种可以在所有平台上都能使用的一种中间代码---字节码文件(.class文件)。有了字节码&#xff0c;无论是那个平台只要安装了虚拟机都可以直接运行字节码文件。有了虚拟机&#xff0c;解除了 java 虚拟机与 java 代码之间的耦合。 Java 虚拟机当初被设计出来时就不单…

如何搭建一个 websocket

环境: NodeJssocket.io 4.7.2 安装依赖 yarn add socket.io创建服务器 引入文件 特别注意: 涉及到 colors 的代码&#xff0c;请采取 console.log() 打印 // 基础老三样 import http from "http"; import fs from "fs"; import { Server } from &quo…

安装NodeJS并使用yarn下载前端依赖

文章目录 1、安装NodeJS1.1 下载NodeJS安装包1.2 解压并配置NodeJS1.3 验证是否安装成功2、使用yarn下载前端依赖2.1 安装yarn2.2 使用yarn下载前端依赖参考目标:在Windows下安装新版NodeJS,并使用yarn下载前端依赖,实现运行前端项目。 1、安装NodeJS 1.1 下载NodeJS安装包…

面试题:Redis和MySQL的事务区别是什么?

大家好&#xff0c;我是小米&#xff01;今天我要和大家聊聊一个在技术面试中经常被问到的问题&#xff1a;“Redis和MySQL的事务区别是什么&#xff1f;”这个问题看似简单&#xff0c;但实际上涉及到了数据库和缓存两个不同领域的知识&#xff0c;让我们一起来深入了解一下吧…

阿里云ECS和轻量服务器有什么区别?

阿里云服务器ECS和轻量应用服务器有什么区别&#xff1f;轻量和ECS优缺点对比&#xff0c;云服务器ECS是明星级云产品&#xff0c;适合企业专业级的使用场景&#xff0c;轻量应用服务器是在ECS的基础上推出的轻量级云服务器&#xff0c;适合个人开发者单机应用访问量不高的网站…

FFmpeg:打印音/视频信息(Meta信息)

多媒体文件基本概念 多媒体文件其实是个容器在容器里面有很多流(Stream/Track)每种流是由不同的编码器编码的从流中读出的数据称为包在一个包中包含着一个或多个帧 几个重要的结构体 AVFormatContextAVStreamAVPacket FFmpeg操作流数据的基本步骤 打印音/视频信息(Meta信息…

模糊搜索利器:Python的thefuzz模块详解

文章目录 thefuzz模块简介thefuzz模块的参数和方法使用thefuzz实现模糊搜索在Python中,thefuzz模块是一个用于实现模糊搜索的强大工具。它可以帮助我们在处理字符串时,快速找到相似的匹配项。本文将详细介绍thefuzz模块的功能和用法,并结合代码示例演示如何实现模糊搜索。 t…

pyqt5使用经验总结

pyqt5环境配置注意&#xff1a; 安装pyqt5 pip install PyQt5 pyqt5-tools 环境变量-创建变量名&#xff1a; 健名&#xff1a;QT_QPA_PLATFORM_PLUGIN_PATH 值为&#xff1a;Lib\site-packages\PyQt5\Qt\plugins pyqt5经验2&#xff1a; 使用designer.exe进行设计&#xff1…

三、【色彩模式与颜色填充】

文章目录 Photoshop常用的几种颜色模式包括&#xff1a;1. RGB模式2. CMYK模式3. 灰度模式4. LAB模式5. 多通道模式 Photoshop颜色填充1.色彩基础2.拾色器认识3.颜色填充最后附上流程图&#xff1a; Photoshop常用的几种颜色模式包括&#xff1a; 1. RGB模式 详细可参考&…