当前位置: 首页 > news >正文

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)}})
})

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

相关文章:

Vue3 模糊搜索筛选

Vue3 模糊搜索筛选 环境&#xff1a; vue3 tselement plus 目标&#xff1a; 输入框输入内容&#xff0c;对展示的列表进行模糊搜索筛选匹配的内容。 代码如下&#xff1a; <div style"margin-top: 50px"><el-input v-model"valueInput" size&…...

【MVC】C# MVC基础知识点、原理以及容器和管道

给自己一个目标&#xff0c;然后坚持一段时间&#xff0c;总会有收获和感悟&#xff01; 国庆假期马上结束&#xff0c;闲暇时间&#xff0c;重温一遍C#关于MVC的技术&#xff0c;控制器、视图、模型&#xff0c;知识点和原理&#xff0c;小伙伴们还记得吗 目录 一、MVC知识点1…...

【kubernetes】基于prometheus的监控

目录 1 监控解决方案2 prometheus2.1 容器监控2.2 节点监控2.3 资源对象监控2.4 metrics--server 3 prometheus-operator vs kube-prometheus vs helm3.1 prometheus-operator3.2 kube-prometheus3.3 helm 参考文档 1 监控解决方案 从实现方案来说&#xff0c;监控分为3个部分…...

Gmail 将停止支持基本 HTML 视图

根据 Google 支持文档的更新内容&#xff0c;Gmail 将从明年 1 月起停止支持基本 HTML 视图。 ▲ Gmai 基本 HTML 视图界面 目前网页版 Gmail 提供两个界面&#xff1a;基本 HTML 视图和标准视图。停止支持基本 HTML 视图后&#xff0c;当前打开经典模式的基本 HTML 视图模式 …...

电影大师杂记

假期集中刷了好多书&#xff0c;游戏和电影&#xff0c;在虚拟世界里猛烈的各种闲逛&#xff0c;cyberpunk 2077到blade runner&#xff0c;到异形&#xff0c;到终结者&#xff0c;到星球大战&环太平洋&#xff0c;到工业光魔&#xff0c;还有各种编程的书。。。 hmmm&…...

聊聊分布式架构——RPC通信原理

目录 RPC通信的基本原理 RPC结构 手撸简陋版RPC 知识点梳理 1.Socket套接字通信机制 2.通信过程的序列化与反序列化 3.动态代理 4.反射 思维流程梳理 码起来 服务端时序图 服务端—Api与Provider模块 客户端时序图 RPC通信的基本原理 RPC&#xff08;Remote Proc…...

Android:实现手机前后摄像头预览同开

效果展示 一.概述 本博文讲解如何实现手机前后两颗摄像头同时预览并显示 我之前博文《OpenGLES&#xff1a;GLSurfaceView实现Android Camera预览》对单颗摄像头预览做过详细讲解&#xff0c;而前后双摄实现原理其实也并不复杂&#xff0c;粗糙点说就是把单摄像头预览流程写两…...

2.2.4 yocto poky openembedded bitbake关系

一 基本概念 The Yocto Project is an open-source project that delivers a set of tools that create operating system images for embedded Linux systems. Poky is the reference operating system distribution built with Yocto Project tools, and OpenEmbedded is a …...

开源后台管理系统 (go-vue-admin)

go-vue-admin 是一套基于go语言开源的后台管理系统。功能参考诺依网站 &#xff0c;前后端分离。 简介 前端采用vue3、Element Plus 、RuoYi-Vue3后端采用gofrome 框架、mysql、redis、Jwt实现了一键生成前后端代码&#xff0c;高效开发。 内置功能 用户管理&#xff1a;用…...

想升级macOS Big Sur,但是MacBook内存空间不够该怎么办?

随着使用时间的增长&#xff0c;我们会发现Mac电脑的存储空间越来越少&#xff0c;这时候我们就需要对Mac电脑进行清理&#xff0c;以释放更多的存储空间。那么&#xff0c;Mac空间不足怎么解决呢&#xff1f; 1.清理垃圾文件 Mac空间不足怎么解决&#xff1f;首先要做的就是清…...

结构化面试 --- 介绍 + 人际关系

目录 一、介绍 1、认识考试 2、认识考官 3、认识对手 4、认识考场 5、认识规则 6、如何备考 二、人际关系 练习题 第一题&#xff08;换岗&#xff09; 第二题&#xff08;办法&#xff09; 第三题&#xff08;相处&#xff09; 第四题 第五题 第六题 …...

李沐深度学习记录5:13.Dropout

Dropout从零开始实现 import torch from torch import nn from d2l import torch as d2l# 定义Dropout函数 def dropout_layer(X, dropout):assert 0 < dropout < 1# 在本情况中&#xff0c;所有元素都被丢弃if dropout 1:return torch.zeros_like(X)# 在本情况中&…...

计算机竞赛 题目:基于大数据的用户画像分析系统 数据分析 开题

文章目录 1 前言2 用户画像分析概述2.1 用户画像构建的相关技术2.2 标签体系2.3 标签优先级 3 实站 - 百货商场用户画像描述与价值分析3.1 数据格式3.2 数据预处理3.3 会员年龄构成3.4 订单占比 消费画像3.5 季度偏好画像3.6 会员用户画像与特征3.6.1 构建会员用户业务特征标签…...

MFC ExtTextOut函数学习

ExtTextOut - 扩展的文本输出&#xff1b; win32 api的声明如下&#xff1b; ExtTextOut( DC: HDC; {设备环境句柄} X, Y: Integer; {起点坐标} Options: Longint; {选项} Rect: PRect; {指定显示范围; 0 表示限制范围} Str: PChar; {字符串…...

Java中阻塞队列原理、特点、适用场景

文章目录 阻塞队列对比、总览阻塞队列本质思想主要队列讲解ArrayBlockingQueueLinkedBlockingQueueSynchronousQueueLinkedTransferQueuePriorityBlockingQueueDelayQueueLinkedBlockingDeque 阻塞队列对比、总览 阻塞队列本质思想 阻塞队列都是线程安全的队列. 其最主要的功能…...

PHP之linux、apache和nginx与安全优化面试题

1.linux常用命令 查看目录pwd 创建文件touch 创建目录mkdir 删除文件rm 删除目录rmdir移动改名文件 mc 查询目录find 修改权限chmod 压缩包 tar 安装 yum install 修改文件vi查看进程ps 停止进程kill 定时任务crontab 2、nginx的优化 gzip压缩优化 expires缓存…...

算法笔记:0-1背包问题

n个商品组成集合O&#xff0c;每个商品有两个属性vi&#xff08;体积&#xff09;和pi&#xff08;价格&#xff09;&#xff0c;背包容量为C。 求解一个商品子集S&#xff0c;令 优化目标 1. 枚举所有商品组合 共2^n - 1种情况 2. 递归求解 KnapsackSR(h, i, c)&#xff…...

C++入门-day02

引言&#xff1a;在上一节中我们接触了C中的命名空间&#xff0c;学会了C中的标准输出流。这一节&#xff0c;我标题一们讲讲缺省、重载。 一、缺省参数 在C中&#xff0c;给函数的形参默认给一个值就是缺省参数&#xff0c;你可能会比较懵逼&#xff0c;下面看一段代码。 正常…...

模板方法模式,基于继承实现的简单的设计模式(设计模式与开发实践 P11)

文章目录 实现举例应用钩子 Hook 模板方法模式是一种基于继承的设计模式&#xff0c;由两部分构成&#xff1a; 抽象父类&#xff08;一般封装了子类的算法框架&#xff09;具体的实现子类 实现 简单地通过继承就可以实现 举例 足球赛 和 篮球赛 都有 3 个步骤&#xff0c…...

php实战案例记录(16)php://input输入流

php://input是PHP中的一个特殊的输入流&#xff0c;它允许访问请求的原始数据。它主要用于处理非表单的POST请求&#xff0c;例如当请求的内容类型为application/json或application/xml时。使用php://input可以获取到POST请求中的原始数据&#xff0c;无论数据是什么格式。使用…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...