vue列表列表过滤

最新推荐文章于 2025-03-04 11:32:49 发布
最新推荐文章于 2025-03-04 11:32:49 发布
阅读量1.1k 收藏 8
点赞数 5
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/libingjiedd/article/details/137754898
版权
本文通过实例展示了如何在Vue应用中使用watch和computed实现基于用户输入的模糊查询数据过滤功能，重点讲解了watch监视和filter方法的应用，以及为何在某些场景下推荐使用computed而非watch。

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

对已知的列表进行数据过滤(根据输入框里面的内容进行数据过滤)

编写案例

通过案例来演示说明

在这里插入图片描述

效果就是这样的 输入框是模糊查询

在这里插入图片描述

想要实现功能，其实就两大步，1获取输入框内容 2根据输入内容进行数据过滤

绑定收集数据

我们可以使用v-model去双向绑定

在这里插入图片描述

在这里插入图片描述

这样第一步收集输入数据就完成了
然后就要实现第二步了

使用watch监视实现

首先使用watch实现，对keyWord进行监视

在这里插入图片描述

确认下监视是没有问题的

在这里插入图片描述

既然监视是没有问题，就可以写逻辑操作了

这里使用filter进行过滤，使用indexOf判断是否包含内容,大概说下indexOf判断是否包含字符串的一些基本操作，如果返回-1表示不包含，如果包含会返回当前这个字符串所在的下标，所以判断是否包含，只需要知道结果是否等于-1

在这里插入图片描述

知道了逻辑以及如何使用api就继续编写代码，这里filer会返回一个新的数组，把过滤出来的新数组替换掉老数组

在这里插入图片描述

查看页面，好像是没问题的

在这里插入图片描述

但是这时候我换成周，没有数据了

在这里插入图片描述

解决filer问题

导致这个问题的原因是：使用filter过滤出来的新数据已经没有关于周的姓名了，这么写的逻辑就是越搜越少，persons是原数据，原数据不能直接修改，原数据里面的数据是不能改变的

在这里插入图片描述

既然这样，我们就新增一个属性，专门存储用来过滤出来的数据

在这里插入图片描述

但是发现一个问题，页面初始化的时候是空的

在这里插入图片描述

但是输入一个马，然后删除掉，数据就有了

在这里插入图片描述

这就要说下indexOf的一个细节，indexOf是可以判断空的，会返回0,判断第一个字符，也会返回0

既然知道这个细节，那么上面这个问题也就解释得通了

在这里插入图片描述

想要解决这个bug，就不能使用监视的简写形式了，我们写成正常写法，加上immediate属性设置为true，自动让过滤器执行参数为空

在这里插入图片描述

测试页面。没有任何问题

在这里插入图片描述

使用computed计算属性实现

监视可以实现的，computed都可以实现，下面就使用computed的方式把上面的案例实现下
大概逻辑都是一样的，只是一些语法不一样，比如watch里面的参数在computed是没有的，我们可以换成this获取。然后返回出去新的结果

在这里插入图片描述

效果也是一样的

在这里插入图片描述

watch和computed对比

通过这个案例知道了使用watch和computed都可以实现，通过对比发现很明显，watch更麻烦一些，computed更精简一些，当两者都能实现的时候，优先使用computed

企鹅d
关注
27.Vue列表过滤
爱米酱的博客
07-11 913
目录1.使用watch属性实现列表过滤2.使用计算属性实现列表过滤3.总结这一小节我们来讲一下Vue的列表过滤，那么想要完成列表过滤就需要有两个关键的步骤：1.获取用户输入2.根据用户输入信息进行匹配针对获取用户输入这一步，我们就需要使用v-model,使用双向绑定，这样用户的输入就可以实时的反馈到数据层。而针对用户信息匹配这一步，最标准的写法应该是使用计算属性去写，但是针对初学者来说可能想不到这么深，初学者可能最开始的想法是这样的只有用户输入的内容发生变化的时候才会进行过滤匹配，所以就要监听这种变化，那么
Vue列表过滤（过滤|排序不分家）-尚硅谷张天禹（笔记）
u011150251的博客
03-23 593
根据尚硅谷讲师张天禹老师VUe课程其中的一节Vue列表过滤整理的一篇笔记，学习记录，敬供参考。
vue 删除数组、list中的元素 filter
weixin_43337481的博客
10-08 1819
let data=[{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'}];//index 当前元素索引；1：需要删除的元素个数。方法一：使用 filter过滤。if(item.name=='张三')方法二：使用 splice 移除。
列表操作（过滤与排序）
最新发布
2301_76428778的博客
03-04 655
列表过滤使用filter方法实现数组过滤，不修改原数组。在Vue.js中，可以通过watch或computed属性实现动态过滤。computed属性更适合简单过滤逻辑，watch适合复杂逻辑。列表排序使用sort方法实现数组排序，会直接修改原数组。在Vue.js中，可以通过computed属性结合按钮操作实现动态排序。应用场景列表过滤和排序是前端开发中常见的功能，适用于表格数据、搜索结果等场景。Vue.js框架通过数据绑定和响应式系统，能够高效地实现动态交互。
Vue的列表过滤
woyilukanguo的博客
06-06 997
Vue中简单的过滤
Vue之列表过滤
weixin_43966335的博客
03-09 2277
Vue,列表过滤
Vue——列表过滤
weixin_47412580的博客
08-19 2417
列表的过滤操作
VUE列表过滤
qq_51550150的博客
03-10 529
【代码】VUE列表过滤。
vue实现前台列表数据过滤搜索、分页效果
10-16
这篇文章主要讲述了如何使用Vue.js框架来实现一个常见的功能——前台列表数据的过滤搜索以及分页效果。这个功能在网页中非常常见，尤其是对于数据展示类的应用，它能够帮助用户快速找到所需的信息。 知识点一：Vue....
vue列表数据发生变化指令没有更新问题及解决方法
10-15
在上述例子中，`:key='index'`可能导致问题，因为当过滤或排序列表时，尽管数据发生了变化，但索引可能保持不变，导致Vue认为元素没有变化，从而不触发指令的更新。 **问题分析：** 在Vue的`v-for`循环中，`:key`...
vue实现城市列表选择功能
10-18
在Vue.js中实现城市列表选择功能，涉及到前端UI交互、数据获取、组件化开发等多个知识点。下面我们将逐一探讨这些关键点。 首先，我们要理解Vue组件化的概念。在上面的示例中，整个城市选择功能被划分为五个组件：`...
Vue2.0 v-for filter列表过滤功能的实现
12-09
使用计算属性app.js var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)" ], key: "" }, computed: { filterShoppingList: function () { // `this`
vue_listfilter
05-11
它是什么？ 基于Vue.js的过滤器实践项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
vue使用List.filter实现过滤(删除)
SSHLY3的博客
11-17 565
vue使用List.filter实现统计,当集合需要删数据时，可以基于传过来的id进行过滤，这里表示处理fruitList中，条件是过滤每一项数据中只留下id与入参id相同的,methods:{ del(id){ this.fruitList=this.fruitList.filter(item=>item.id!==id) }, }
vue中的列表过滤和列表排序
Yyds12300的博客
11-23 454
运行一下,因为过滤的缘故，越是搜索数据越少。预期不符.解决方案:1、加入空的数组 flashPersons，作用是保留persons数组的数据2、用完整的watch加入 immediate: true进行尝试3、用index方法将flashPersons显示出来数据，
vue列表搜索过滤
LuiChun
11-24 1569
1.第一种设置未搜索不展示数据 <template> <div class="mid"> <div class="left"> <h3>搜索列表</h3> <input type="text" placeholder="搜索名字" v-model="searchName" /> <ul class="left"> <!-- 这里写成 filterLi
vue 列表过滤
MCCLS的博客
07-15 601
用一个案例大致解释下： 这边要进行一个模糊查询 输入一个冬,则只显示上面俩个 也就是说,把100条数据根据你的输入只显示出6条这就是一种过滤 要输入一个字时,下面就要发生改变所以就是一个v-model的双向绑定 用watch实现： 这边使用了 indexOf（） 不包含则返回-1包含则返回对应的索引值 filter过滤方法中,它是不会该变数组的,会新生成出一个数组,而这还没有对新生成的数组进行调用 原数据不能更改所以要定义一个filPersons 前面...
Vue-列表过滤
见证自己学习,成长的记录
04-23 2180
这里使用filter进行过滤，使用indexOf判断是否包含内容,大概说下indexOf判断是否包含字符串的一些基本操作，如果返回-1表示不包含，如果包含会返回当前这个字符串所在的下标，所以判断是否包含，只需要知道结果是否等于-1。导致这个问题的原因是：使用filter过滤出来的新数据已经没有关于周的姓名了，这么写的逻辑就是越搜越少，persons是原数据，原数据不能直接修改，原数据里面的数据是不能改变的。监视可以实现的，computed都可以实现，下面就使用computed的方式把上面的案例实现下。
Vue技术—列表过滤
u013140948的博客
12-24 961
面试题：react、vue中的key有什么租用？（key的内部原理） <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyworld"> <ul> <li v-for="(p,index) in filpersons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} &
VUE移动端列表筛选实战教程
本文档详细介绍了如何利用 Vue 实现列表筛选功能，以便在 vant 框架搭建的 webapp 中提供一个灵活且易用的筛选体验。作者分享了他们在遇到官方组件未能满足需求时，自定义开发列表筛选组件的过程。 首先，HTML部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值