Vue - 根据输入关键字过滤数组列表(列表搜索功能)

已于 2025-01-19 15:35:49 修改
阅读量8.6k 收藏 22
点赞数 6
CC 4.0 BY-SA版权
分类专栏： + Vue + Vue2 开发问题汇总 文章标签： Vue
于 2019-08-10 21:11:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/99110152
+ Vue 同时被 2 个专栏收录
250 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue2 开发问题汇总
119 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了如何在Vue项目中根据用户输入的关键字实时过滤数组列表，实现列表搜索功能。讲解了includes()和filter()两个核心JavaScript方法的用法，帮助开发者理解并应用到实际场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

在这里插入图片描述
输入关键字，自动匹配带有关键字的列表，过滤列表数组。
在这里插入图片描述

完整代码

可一键复制运行。

了解本专栏 订阅专栏 解锁全文
vue2/3 - 实现搜索列表关键字高亮效果功能，vue2/vue3搜索框输入关键字后下方列表根据关键字高亮突出显示字体文字，让一段文字中指定关键文字高亮显示（详细完整示例代码，一键复制开箱即用！）
高级前端工程师
01-20 2500
vue2，vue3，uniapp，搜索关键字高亮显示，Vue3字符串“关键字“高亮，vue3搜索框实现关键字高亮功能，vue2搜索关键字结果文字高亮，搜索结果高亮显示关键字，Vue3中实现关键字高亮的一种思路，js如何让一段文字中指定文字高亮显示，正则表达式，关键词搜索高亮，输入框搜索匹配关键字显示高亮,字母大小写不改变，vue点击搜索后内容关键字标红，在结果中高亮显示关键词，搜索词高亮，关键字筛选高亮，高亮搜索的关键字，过滤后高亮关键字，实现搜索关键词高亮显示，uniapp怎么让搜索列表根据输入的关键字标
vue+ant design vue - 实现Tree树形控件带搜索库并可关键字搜索筛选功能，Antd组件库a-tree可搜索的树展示搜索结果并展开（根据关键字搜索过滤tree树列表数据，详细示例代码
高级前端工程师
05-06 4305
Vue AntDesign可搜索的树（只展示搜索结果并展开）vue+antd使用andt-tree实现可搜索的tree_antd选择树搜索，vue项目Antd 实现Tree树形控件带搜索功能，支持搜索展开tree，antd-tree组件带搜索框，Ant Design Vue组件Tree树形控件，Tree组件实现可搜索的树，ant.design组件库中的Tree组件实现可搜索的树，树控件的搜索功能，antd Tree 组件 带搜索，动态list数据，tree嵌套数据，搜索后关键字标红，具备搜索功能的树形组件，
vue input输入框关键字筛选检索列表数据展示
10-16
主要为大家详细介绍了vue input输入框关键字筛选检索列表数据展示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤
weixin_30344795的博客
06-08 154
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-sc...
Vue 中 filter 过滤的语法详解与注意事项
最新发布
weixin_51288065的博客
06-23 1177
在 Vue.js 中，"过滤"通常指两种不同概念：模板过滤器（Vue 2 特性）和数组过滤（数据过滤）。由于 Vue 3 已移除模板过滤器，我将重点介绍更实用且通用的数组过滤语法和注意事项。
VUE-搜索过滤器
weixin_30938149的博客
01-29 135
先看看效果 首先引入 <script src="https://cdn.jsdelivr.net/npm/vue"></script> HTML部分 <div id="app"> <input v-model='search' /> <ul v-if="searchDat...
vue 过滤、筛选数组
@you的博客
04-30 1万+
// 用循环 test() { let arr = [ { name: 'lisi', age: 23 }, { name: 'zhangsan', age: 18 }, { name: 'wangwu', age: 29 } ] // 这里来筛选条件 .
vue3【侦测|过滤|数组方法】数据变化侦测&&信息筛选过滤&&常用数组方法.filter() .map() .forEach(). find()
XSL_HR的博客
10-16 1万+
本期内容主要是数据变化的检测和信息的过滤筛选以及常用的数组方法(.filter()、.map()、.forEach()、.find()、、.some()、.every()、.fill())。
Vue2.0 v-for filter列表过滤功能的实现
10-18
当用户输入关键字时，`filterShoppingList`会根据新值过滤`shoppingList`，并更新视图中的列表项。 6. **事件监听（Event Handling）** 虽然在本例中没有明确提及，但`v-model`实际上隐含了对用户输入事件的监听，...
vue3+ant design vue 实现Tree树形控件带搜索库并可关键字搜索筛选功能，Antd组件库a-tree可搜索的树展示搜索结果并展开（根据关键字搜索过滤tree树列表数据，详细示例代码）
高级前端工程师
05-08 4899
Vue3 AntDesign可搜索的树（只展示搜索结果并展开）vue3+antd使用andt-tree实现可搜索的tree_antd选择树搜索，vue3项目Antd 实现Tree树形控件带搜索功能，支持搜索展开tree，antd-tree组件带搜索框，Ant Design Vue3组件Tree树形控件，Tree组件实现可搜索的树，ant.design组件库中的Tree组件实现可搜索的树，树控件的搜索功能，antd Tree 组件 带搜索，动态list数据，tree嵌套数据，搜索后关键字标红，具备搜索功能的树
vue filter( ) 过滤数组方法
热门推荐
weixin_41796631的博客
10-02 7万+
要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据（非变异方法）。可以使用filter( ) 方法。 &lt;div id="div"&gt; &lt;li v-for="n in evenNumbers"&gt;{{ n }}&lt;/li&gt; &lt;/div&gt; &lt;script&gt; varvm=new Vue({ el:"#div&qu
18. Vue 常用列表操作实例 - 根据关键字实现数组的过滤
DevOps海洋的渔夫@专栏
03-11 1448
需求 前面介绍了列表操作中的数据新增、删除的功能，本篇章来看看关键字查询的功能。 处理步骤 在VM实例中定义关键字参数searchName. var vm = new Vue({ el: '#app', data: { searchName:'', // 关键字 ...
Vue：数组的过滤排序显示客户端实现
KaiSarH
11-21 466
vue中数组的过滤排序显示客户端实现
Vue中如何对数据进行过滤和排序？
有我更精彩的博客
05-22 933
在Vue中，对数据进行过滤和排序是非常简单的。我们可以使用filter方法来过滤数据，使用sort方法来排序数据。这些方法可以帮助我们更方便地处理数据并展示在页面上。web前端高频面试题_在线视频教程-CSDN程序员研修院最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
vue 局部过滤 数组数据
weixin_45844542的博客
06-16 1373
业务需要是table展示多个地区以逗号隔开,而后台返回来是有null 的数据需要我们进行处理一下， 代码如下： <el-table-column> <template slot-scope="scope"> <!-- 这里是拿到数据展示 --> {{ scope.row.deptNameList | deptNameList}} </template> </el-table-column>
vue 项目根据多条件筛选数组
weixin_44056717的博客
06-01 2627
Vue项目 -----封装数组根据多条件筛选功能
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
分享互联网的有趣知识~
06-11 4702
Vue数组处理
Vue的过滤器(filter)
上庸者-不服周
06-28 1万+
过滤器的使用
vue实现一个具有添加、删除、按关键字过滤的列表管理
NB1999的博客
09-03 722
直接贴代码了： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
Vue实现列表数据过滤搜索与分页实战教程
在本文中，我们将探讨如何在Vue前端开发中实现列表数据的过滤搜索功能以及分页效果。首先，我们关注的是job.vue页面的设计，这里采用SCSS编写样式以增强页面布局和用户体验。 1. 页面结构与样式： - `job-wrapper`...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔡来了

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值