vue如何实现列表过滤

最新推荐文章于 2024-08-20 09:45:52 发布
最新推荐文章于 2024-08-20 09:45:52 发布
阅读量333 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62276354/article/details/130377662
版权
文章介绍了在Vue.js中如何使用watch和计算属性实现列表过滤功能。通过监听input的keyword实现动态搜索，利用filter方法处理数据。同时，对比了计算属性的简洁实现，直接对数据进行筛选计算。
摘要由CSDN通过智能技术生成

列表过滤常常用在搜索上 比较常用实现的是watch和计算属性实现接下来我们先用一组假数据来实现一下效果

watch实现

首先keyword是查询的input框通过v-model来实现一个双向数据绑定 注意这里循环的filperons刚开始是不展示的 是通过watch中的immediate：true，一旦触发就自动执行一次 否则的话第一次数据是不展示出来的 具体在下方图片

 

 persons就是循环的假数据

 

 那么用监听实现的话 首先就要监听input的双向数据绑定的keyword 这里filperons的作用是代替persons这个数组通过filter的方法来进行一个逻辑处理

 计算属性实现

计算属性就比较简单了一点 直接对这个数据进行一个方法的筛选计算就可以实现

 

神仙怕右手
关注
27.Vue列表过滤
爱米酱的博客
07-11 864
目录1.使用watch属性实现列表过滤2.使用计算属性实现列表过滤3.总结这一小节我们来讲一下Vue的列表过滤，那么想要完成列表过滤就需要有两个关键的步骤：1.获取用户输入2.根据用户输入信息进行匹配针对获取用户输入这一步，我们就需要使用v-model,使用双向绑定，这样用户的输入就可以实时的反馈到数据层。而针对用户信息匹配这一步，最标准的写法应该是使用计算属性去写，但是针对初学者来说可能想不到这么深，初学者可能最开始的想法是这样的只有用户输入的内容发生变化的时候才会进行过滤匹配，所以就要监听这种变化，那么
Vue-列表过滤
见证自己学习,成长的记录
04-23 2123
这里使用filter进行过滤，使用indexOf判断是否包含内容,大概说下indexOf判断是否包含字符串的一些基本操作，如果返回-1表示不包含，如果包含会返回当前这个字符串所在的下标，所以判断是否包含，只需要知道结果是否等于-1。导致这个问题的原因是：使用filter过滤出来的新数据已经没有关于周的姓名了，这么写的逻辑就是越搜越少，persons是原数据，原数据不能直接修改，原数据里面的数据是不能改变的。监视可以实现的，computed都可以实现，下面就使用computed的方式把上面的案例实现下。
Element-UI Table实现列表筛选数据及列表嵌套选择框
最新发布
懒人w的博客
08-20 1024
VUE 框架在 Element UI 的基础上，Table 组件中实现了列表数据的修改功能，支持单选和多选功能，并且列表具备筛选功能。样式如图所示。 列表选择 <el-table-column width="60" prop="correlationJudgment"> <!-- 列数据筛选功能 --> <template #header> <span class="top-header">相关性<br />
Vue之列表过滤
qq_67801847的博客
08-10 152
1.通过v-model进行双向匹配，获取输入的数据。
Vue——列表过滤
王王仙贝的博客
03-26 1061
实现名字过滤，输入一个字，就能出现带有这个字的相关的名字 <body> <div id="root"> <h2>人员列表</h2> <input v-model="keyWord" type="text" placeholder="请输入名字"> <!-- 遍历列表 --> <ul> <li v-for="p in fi
vue实现表格过滤功能
10-16
在Vue.js中，实现表格过滤功能是常见的需求，特别是在数据展示和用户交互中。这个功能允许用户通过输入关键词快速筛选出符合特定条件的数据项。在给出的代码示例中，我们看到了一个简单的表格过滤和排序功能的实现。...
vue实现前台列表数据过滤搜索、分页效果
10-16
这篇文章主要讲述了如何使用Vue.js框架来实现一个常见的功能——前台列表数据的过滤搜索以及分页效果。这个功能在网页中非常常见，尤其是对于数据展示类的应用，它能够帮助用户快速找到所需的信息。 知识点一：Vue....
vue实现搜索过滤效果
10-16
以上就是关于“vue实现搜索过滤效果”的详细说明，涵盖了HTML、CSS和JavaScript（Vue.js）的实现细节，以及如何根据用户输入进行数据过滤的示例。这个功能在Web应用中非常常见，可以帮助用户高效地查找和管理大量...
vue实现城市列表选择功能
10-18
总结起来，Vue实现城市列表选择功能涉及到的关键知识点包括： 1. Vue组件化开发：通过拆分组件，实现代码的模块化和复用。 2. 数据获取与处理：使用axios请求JSON数据，通过Vue的数据绑定和生命周期钩子管理数据。 ...
vue---数据列表过滤筛选
weixin_34088598的博客
05-17 4478
使用vue进行数据过滤筛选是比较常用的功能，常见的使用场景就是搜索框数据筛选过滤了。简单示例： <template> <div> <input type="text" v-model="search"> <ul> <!-- 注意！注意！注意！这里循环遍历的是items，不再是data里的list数组...
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
01-08
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题 在一个完整的数据数据渲染的 elementui 表格组件中，筛选输出数据 目录 布局代码 样式代码 vue代码 布局展示 功能实现 逻辑解析 布局代码 搜索ID   搜索关键字   性别筛选 样式代码 *{margin:0;padding:0;} #app{ background:#ccc; } .header{ width:100%;
Vue学习：列表过滤
weixin_47295886的博客
02-11 373
搜索相同的显示。
vue之列表过滤与列表排序
wfly blog
10-21 259
<template> <div class="jz"> <div> <input type="text" v-model="searchName"> <ul> <li style="font-size: 16px" v-for...
Vue列表过滤（过滤|排序不分家）-尚硅谷张天禹（笔记）
u011150251的博客
03-23 545
根据尚硅谷讲师张天禹老师VUe课程其中的一节Vue列表过滤整理的一篇笔记，学习记录，敬供参考。
vue——列表过滤、列表排序、数据监测、vue.set
h_jQuery的博客
08-20 376
列表过滤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
【Vue】列表过滤
Erin_jwx的博客
08-04 175
用watch实现 <!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-UA-Compatible" content="ie=edge"> <t.
vue学习：列表的过滤与排序
sayoko06的博客
12-14 485
当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性 来返回过滤或排序后的数组，例如： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;列表渲染_过滤与排序&lt;/title&gt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值