Vue-列表过滤

已于 2023-06-12 17:55:06 修改
阅读量1.9k 收藏 4
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2023-04-23 16:35:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46713508/article/details/130324780
版权

列表过滤

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

编写案例

通过案例来演示说明

在这里插入图片描述

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

在这里插入图片描述

想要实现功能，其实就两大步，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

小花皮猪
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue-Cli中自定义过滤器的实现代码
12-10
本文主要介绍了Vue-Cli中自定义过滤器，分享给大家，也给自己做个笔记 vue2里面移除了内置过滤器，所有过滤器都需要自己定义。 以下例子是使用webpack模版自定义一个日期格式过滤器的例子。 文件结构 . ├── src │ ├── Filters │ │ ├── DataFormat.js │ │ └── index.js │ └── main.js └── ... 所有过滤器都放在Filters文件夹下，剩下的就是webpack模版的文件结构，在这里就不完全写出来。 Filters/DataFormat.js 这个文件主要是写了过滤器实现的方法，然后export进
vue遍历数据是对数据进行筛选 过滤 排序
weixin_33937499的博客
10-24 4945
使用computed 方法来过滤筛选数据;或者使用methods 方式来筛选过滤数据 <body> <div id="app"> <ul> <li v-for="item in list">{{item.id}}</li> </ul> ...
VUE列表过滤
最新发布
qq_51550150的博客
03-10 377
【代码】VUE列表过滤。
vue学习路(三)：computed计算属性，字符串翻转+成绩筛选
qq_44860114的博客
11-20 1171
vue-computed计算属性 什么是计算属性？可以简单的理解能够在里面写一些计算逻辑的属性。 特点： 能够处理data数据，并返回处理后的数据结果，供页面直接使用。 能够监测到data的变化，重新触发计算。 data不变的情况下，第一次运算的结果可以多次重复使用，相当于被缓存起来。 computed计算属性内可以非常灵活的处理数据。 降低了代码冗余度(相比较不使用计算属性而言)。 只看到这里还是有点懵，下面通过两个小demo可以更加深入的了解computed计算属性。 demo1——字符串翻转 &l
关于某些情况Vue的过滤器无法使用
weixin_33890526的博客
03-05 3025
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 &lt;router-link :to="{ path: item.type | changeToNum, query: { id: item.fid }}"&gt; ...
vue ——学生成绩录入、筛选、删除、监听
qq_55195123的博客
07-06 788
登录页面： 主要解决思路： 1.需要定义并且渲染列表数据 2.获取表单中的数据，并且新增至数据列表 3.删除单挑信息 4.使用computed完成数据筛选 5.三个按钮被选中的时候样式 6.监听事件watch 将数据存在在localStorage 7.生命周期created html代码： vue代码： ...
Vue——列表过滤
weixin_47412580的博客
08-19 2199
列表的过滤操作
Vue之列表过滤
weixin_43966335的博客
03-09 2053
Vue,列表过滤
Vue js 对List进行遍历、过滤、排序、分组
gdgztt的专栏
11-27 2257
Vue js 对List进行遍历、过滤、排序、分组 1、遍历（forEach）2、循环（filter）3、排序（sort）4、分组（groupBy）
Vue的列表过滤
woyilukanguo的博客
06-06 905
Vue中简单的过滤
vue 的指令与过滤器
酷爱前端的小陈博客
04-15 2777
1. 指令的概念 指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。 vue 中的指令按照不同的用途可以分为如下 6 大类： ① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令 ④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ 列表渲染指令 注意：指令是vue 开发中最基础、最常用、最简单的知识点。 1.1 内容渲染指令 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个： 1、v-text...
vue-good-table-一个易于使用的VueJS（2.x）表插件，具有排序，列过滤，分页等功能。-Vue.js开发
05-27
Vue-good-table易于使用，清洁且功能强大的VueJS数据表，具有诸如排序，列过滤，分页和其他更多基本功能Vue-good-table用于VueJS的易于使用，清洁且功能强大的数据表具有基本功能例如排序，列过滤，分页等等-xaksis....
vue-numeral-filter:适用于Numeral.js的Vue.js过滤器
05-11
Vue-数字过滤器 适用于Numeral.js的Vue.js过滤器 允许在组件的模板部分内联使用 。 这是在您不希望创建计算属性的情况下呈现数字格式数据的便捷方法。 示范 安装 NPM 这是推荐的方法。 npm install vue-numeral-...
vue-table-dynamic-具有排序，过滤，编辑，分页，多选等功能的动态表。-Vue.js开发
05-27
功能多项选择搜索排序过滤器分页编辑边框突​​出显示列宽配置标头固定标头固定列演示https://theoxiong.github.io/vue-table-dynamic/ Install $ npm install vue-table-dynamic --save用法导入从'vue-table-...
vue-filter-date-format-Vue 2的简单日期时间过滤器。-Vue.js开发
05-27
vuejs-community / vue-filter-date-format用于Vue.js的简单日期时间过滤器从npm安装安装$ npm install @ vuejs-community / vue-filter-date @ vuejs-community / vue-filter-date-format简单日期时间Vue.js过滤器...
vue成绩排名和筛选
m0_51458506的博客
05-27 1510
用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分 letscores=[ {name:'Bob',math:97,chinese:89,english:67}, {name:'Tom',math:67,chinese:52,english:98}, {name:'Jerry',math:72,chinese:87,english:89}, {name:'Ben',...
Vue学习：列表过滤
weixin_47295886的博客
02-11 329
搜索相同的显示。
Vue---列表过滤(侦听器和计算属性)
weixin_52705712的博客
07-30 154
通过handler函数动态传入最新的值，默认有两个参数newValue和oldValue，这里传入newValue即可；>要给每一个li绑定v-for用来展示列表数据，并对输入框进行双向数据绑定（keyWord）。>不要忘记加上immediate:true选项，它代表立即执行一次渲染；还是适合用来进行列表渲染的，把逻辑代码写入相关函数里即可。配置里，写于一个空的数组，用来接受筛选后的对象信息。本文章主要使用vue的。来进行姓名的模糊查找。
27.Vue列表过滤
爱米酱的博客
07-11 823
目录1.使用watch属性实现列表过滤2.使用计算属性实现列表过滤3.总结这一小节我们来讲一下Vue的列表过滤，那么想要完成列表过滤就需要有两个关键的步骤：1.获取用户输入2.根据用户输入信息进行匹配针对获取用户输入这一步，我们就需要使用v-model,使用双向绑定，这样用户的输入就可以实时的反馈到数据层。而针对用户信息匹配这一步，最标准的写法应该是使用计算属性去写，但是针对初学者来说可能想不到这么深，初学者可能最开始的想法是这样的只有用户输入的内容发生变化的时候才会进行过滤匹配，所以就要监听这种变化，那么
vue中listquery
05-11
在 Vue 中，List Query 是指在列表页面中实现搜索、过滤、排序等操作的功能。通常情况下，我们需要在组件中定义一个列表数据源（比如一个数组或者一个 API 接口），然后在模板中展示这个数据源。接着，在组件中定义一些状态变量来表示搜索条件、排序方式等，然后在模板中通过表单元素（比如输入框、下拉框等）与这些状态变量进行绑定，从而实现搜索、过滤、排序等功能。 下面是一个简单的示例，展示了如何在 Vue 中实现一个基本的 List Query： ```html <template> <div> <label>Search:</label> <input type="text" v-model="searchText"> <label>Sort by:</label> <select v-model="sortBy"> <option value="name">Name</option> <option value="age">Age</option> </select> <table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="person in filteredList" :key="person.id"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { people: [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 20 }, ], searchText: '', sortBy: 'name', }; }, computed: { filteredList() { let list = this.people.slice(); if (this.searchText) { list = list.filter(person => person.name.toLowerCase().includes(this.searchText.toLowerCase()) ); } if (this.sortBy === 'name') { list = list.sort((a, b) => a.name.localeCompare(b.name)); } else { list = list.sort((a, b) => a.age - b.age); } return list; }, }, }; </script> ``` 在这个示例中，我们首先定义了一个 people 数组来表示人员列表。然后，我们定义了两个状态变量 searchText 和 sortBy，分别表示搜索文本和排序方式。在模板中，我们使用一个输入框和一个下拉框来与这两个状态变量进行绑定。最后，在计算属性 filteredList 中，我们根据搜索文本和排序方式对人员列表进行过滤和排序，并返回过滤后的列表。 需要注意的是，在实际开发中，我们通常会将列表数据源和状态变量放在一个 Vuex store 中，以便在多个组件之间共享数据。同时，我们也可以使用第三方库（比如 Element UI 或者 Vuetify）来快速地构建出复杂的 List Query 功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小花皮猪

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值