VUE.JS实现数组条件过滤。

最新推荐文章于 2023-12-11 23:38:09 发布
最新推荐文章于 2023-12-11 23:38:09 发布
阅读量1.4k 收藏
点赞数
分类专栏： VUE，前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDNwangyi/article/details/127700348
版权

目标业务场景:有两个数组，在数组一arr1中筛选出，数组二arr2中没有的。

// arr1应用filter函数遍历，x为每一次遍历的值，保留条件为在arr2中不能用indexOf匹配到，那么被indexOf找到的就被过滤掉了
 arr1 = arr1.filter(x => arr2.indexOf(x) == -1)

总结：这样写比for循环好用，简单方便，且能轻松实现不同条件的过滤。

王世诣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端vue二维数组解析
09-12
通过vue解析表头合并的表格，后台返回的数据格式为[{name:aa,list:[{value:100}]}] 通过table与v-for组合循环数据达到目的。 vue 表头合并数据解析 vue 二维数组解析 vue 二维list解析 vue table+v-for
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 8565
本期内容主要是数据变化的检测和信息的过滤筛选以及常用的数组方法(.filter()、.map()、.forEach()、.find()、、.some()、.every()、.fill())。
vue filter( ) 过滤数组方法
热门推荐
weixin_41796631的博客
10-02 7万+
要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据（非变异方法）。可以使用filter( ) 方法。 <div id="div"> <li v-for="n in evenNumbers">{{ n }}</li> </div> <script> varvm=new Vue({ el:"#div&qu
【vue】Vue中的filter()用法
qq_44727978的博客
04-25 2万+
前台数据处理。超详细的小白教程filter()
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
分享互联网的有趣知识~
06-11 4432
Vue数组处理
vue.js实现备忘录功能的方法
10-19
Vue.js 是一个流行的轻量级前端JavaScript框架，用于构建用户界面。在本示例中，我们将探讨如何使用Vue.js实现一个基本的备忘录功能。备忘录应用通常需要用户能够添加、编辑、删除和查看待办事项。下面，我们将详细...
Vue.js 实现数据展示全部和收起功能
10-18
在Vue.js中实现数据展示全部和收起功能是一项常见的需求，尤其在处理大量列表数据时。这个功能使得用户能够高效地浏览信息，同时保持页面整洁。以下是一个详细步骤的介绍，帮助你理解如何使用Vue.js来实现这一功能。...
Vue.js实现价格计算器功能
10-19
在本文中，我们将探讨如何使用Vue.js框架实现一个价格计算器功能。Vue.js是一个轻量级的JavaScript库，它提供了一种声明式的数据绑定和组件化的开发方式，使得构建用户界面变得更加简单高效。下面，我们将深入解析...
Vue.js学习之过滤器详解
10-20
2. `filterBy`: 这个过滤器根据指定的条件过滤数组。例如，`{{ products | filterBy '水果' in 'category' }}` 将返回包含关键词 `'水果'` 的商品。 3. `orderBy`: 这个过滤器用于对数组进行排序，可以指定升序或...
Top 50 Vue.js Interview Questions.docx
09-06
Vue.js Interview Questions ...同时，我们还可以了解到 Vue.js 的一些内置指令，如 v-for、v-show、v-if、v-else、v-bind、v-model 等，以及如何在 Vue.js 中创建一个 Vue 实例、创建自定义过滤器、使用虚拟 DOM 等。
2021-05-28 vue使用filter过滤数组
weixin_53587375的博客
05-28 6027
在不使用计算属性的情况下，可以使用filter方法对数组进行过滤 例如 this.teachers = this.teachers.filter(function (teacher) { return !(teacher === ''); }); return的结果是一个布尔值，根据自己的实际情况设定条件即可！ 上述代码将teachers数组中的空值全部过滤掉了，但是filter并不会改变原有数组以及排序，因此如果需要反复使用过滤后的数组，需要将过滤后的返回值重新赋值给一个新的变量！ 过滤掉了 数组中每
18. Vue 常用列表操作实例 - 根据关键字实现数组的过滤
DevOps海洋的渔夫@专栏
03-11 1351
需求 前面介绍了列表操作中的数据新增、删除的功能，本篇章来看看关键字查询的功能。 处理步骤 在VM实例中定义关键字参数searchName. var vm = new Vue({ el: '#app', data: { searchName:'', // 关键字 ...
vue js对返回的数据进行过滤，去重，提取赋值
qq_40295815的博客
07-29 3922
第一种情况 得到一堆数组，但是只想提取某几个作为参数使用 letbarand= res.data.data letnameDataitem=barand.filter(item=>{ returnitem.brandName=="大闸蟹"||item.brandName=="水稻" // 过滤出我想要的这2种类型下对应的数据 }); 处理出的数据源，分别进行单独的参数map，使其单独形成一个对应的数组 letdatas=nameData...
Vue数组更新相关方法和过滤与排序的使用
weixin_46019681的博客
04-03 1516
Vue将被监听的数组进行了包裹，他们会触发视图更新，被包裹的方法包括：push(),pop(),shift(),unshift(),splice(),sort(),reverse(). 顺便提一下用于过滤数据的方法filter() 1.push() 向数组末尾添加任意数量数据，并返回修改后数组的长度。有两种方式： eg1：通过v-on指令，绑定add方法，在add方法里使用push() eg2. 直接在标签里调用push方法 result： eg3. 在控制台添..
vue filter函数实现前端多条件查询
qq_45371619的博客
08-03 732
filter进行多条件查询，两种实现方法，简简单单
Vue 中的对象数组中找出符合条件的对象
chen的博客
12-11 2868
在 Vue 中，你可以使用 JavaScript 的方法来找出符合条件的对象。如果你有一个对象数组，想要找出满足特定条件的对象，你可以使用数组的find或filter方法。filter()filterfind在这两种情况下，condition是一个函数，用于定义你的过滤条件。这样你就可以利用filter或find方法来在 Vue 中的对象数组中找出符合条件的对象了。
vue过滤出去不带某个字段的对象
weixin_43703816的博客
06-05 249
使用hasOwnProperty这个方法即可，object.hasOwnProperty()其中data.SC为一个数组。
vue2.0实现多维数组筛选过滤排序
weixin_30472035的博客
04-08 1361
仅仅一个一维数组用vue很好排序 网上也有很多demo 但是多维数组如何排序呢 试了好多遍 发现可以用数组遍历之后 再过滤排序就很简单了 以下是代码 如果是后台请求的数据 也可遍历后进行过滤排序 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit...
vue.js关键字过滤
最新发布
04-04
Vue.js是一种流行的JavaScript框架，用于构建用户界面。关键字过滤是Vue.js中的一个常见功能，用于在列表或表格中根据用户输入的关键字来过滤数据。 在Vue.js中实现关键字过滤可以通过以下步骤： 1. 在Vue实例的data属性中定义一个用于存储原始数据的数组，例如`items`。 2. 在Vue实例的data属性中定义一个用于存储过滤后数据的数组，例如`filteredItems`。 3. 在Vue实例的methods属性中定义一个方法，例如`filterItems`，用于根据关键字过滤数据。 4. 在模板中使用`v-model`指令将用户输入的关键字绑定到Vue实例的一个属性上，例如`keyword`。 5. 使用计算属性或侦听器来监听关键字的变化，并在变化时调用`filterItems`方法进行数据过滤。 6. 在模板中使用`v-for`指令遍历`filteredItems`数组，并展示过滤后的数据。 下面是一个简单的示例代码： ```html <template> <div> <input type="text" v-model="keyword" placeholder="请输入关键字"> <ul> <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { keyword: '', items: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' } ], filteredItems: [] }; }, methods: { filterItems() { this.filteredItems = this.items.filter(item => { return item.name.toLowerCase().includes(this.keyword.toLowerCase()); }); } }, watch: { keyword() { this.filterItems(); } } }; </script> ``` 在上述示例中，用户输入的关键字会触发`keyword`属性的变化，然后通过计算属性或侦听器调用`filterItems`方法进行数据过滤，最终展示过滤后的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值