Vue中filter的使用

在 Vue.js 中,filter() 方法用于创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。filter() 不会改变原数组,而是返回一个新的数组。

语法

array.filter(callback(element[, index[, array]])[, thisArg])
  • callback:函数,用于测试每个元素。接收三个参数:
    • element:数组中当前处理的元素。
    • index(可选):当前元素的索引。
    • array(可选):调用 filter 的数组。
  • thisArg(可选):执行 callback 时,用作 this 的值。

基本用法

以下是一些基本的 filter 用法示例:

过滤数字数组中的偶数
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]
过滤对象数组中的特定属性值
let users = [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 20 }
];let adults = users.filter(user => user.age >= 21);
console.log(adults); 
/*
[{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 }
]
*/

在 Vue.js 中使用 filter

在 Vue.js 组件中,filter 方法常用于以下场景:

  1. 显示符合特定条件的数据:根据用户输入或其他条件动态过滤数据。
  2. 搜索功能:根据关键字过滤列表。
示例:动态过滤列表
<template><div><input v-model="searchQuery" placeholder="搜索用户"><ul><li v-for="(user, index) in filteredUsers" :key="index">{{ user.name }} - {{ user.age }}</li></ul></div>
</template><script>
export default {data() {return {searchQuery: '',users: [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 20 }]};},computed: {filteredUsers() {return this.users.filter(user => {return user.name.toLowerCase().includes(this.searchQuery.toLowerCase());});}}
};
</script>

在这个示例中:

  • searchQuery 是一个绑定到输入框的模型,用于存储用户输入的搜索关键字。
  • filteredUsers 计算属性根据 searchQueryusers 数组进行过滤,返回名字包含搜索关键字的用户列表。

复杂过滤条件

可以结合多个条件来过滤数组。例如,过滤出年龄大于等于 21 且名字包含特定字符的用户:

computed: {filteredUsers() {return this.users.filter(user => {return user.age >= 21 && user.name.toLowerCase().includes(this.searchQuery.toLowerCase());});}
}

这种方法非常灵活,可以根据需要组合多种条件进行过滤。

使用 thisArg

thisArg 参数允许在 callback 函数内部使用指定的 this 值。例如:

computed: {filteredUsers() {return this.users.filter(function(user) {return user.age >= 21 && user.name.toLowerCase().includes(this.searchQuery.toLowerCase());}, this);}
}

在这个例子中,通过传递 this 作为 thisArg,可以在 callback 函数内部访问组件实例的属性和方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/49495.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Element UI内置的Select下拉和Tree树形组件,组合封装的树状下拉选择器

目录 简述 效果 功能描述 代码实现 总结 简述 基于Element UI内置的Select下拉和Tree树形组件&#xff0c;组合封装的树状下拉选择器。 效果 先看效果&#xff1a; 下拉状态&#xff1a; 选择后状态&#xff1a; 选择的数据&#xff1a; 功能描述 1、加载树结构&…

Linux云计算 |【第一阶段】SERVICES-DAY2

主要内容&#xff1a; DNS服务基础及搭建、特殊解析(针对地址库文件&#xff1a;DNS轮询 DNS泛域名解析 DNS别名&#xff09;、缓存DNS&#xff08;全局转发forwarders&#xff09;、DNS递归迭代&#xff08;子域授权&#xff09;、DNS主从架构搭建、DNS主从数据同步 一、DNS工…

【技术升级】Docker环境下Nacos平滑升级攻略,安全配置一步到位

目前项目当中使用的Nacos版本为2.0.2&#xff0c;该版本可能存在一定的安全风险。软件的安全性是一个持续关注的问题&#xff0c;尤其是对于像Nacos这样的服务发现与配置管理平台&#xff0c;它在微服务架构中扮演着核心角色。随着新版本的发布&#xff0c;开发团队会修复已知的…

光伏模拟器应用

太阳能光伏 (PV) 模拟器是一种可编程电源&#xff0c;用于模拟太阳能电池板。模拟器具有快速瞬态响应&#xff0c;可响应负载条件的变化并保持电压-电流特性的输出。 用户可以根据系统规格定义太阳能电池板配置&#xff0c;并通过选择环境条件来选择适当的环境条件进行模拟。用…

安全产品在防御勒索病毒中的作用

在数字时代&#xff0c;网络安全威胁日益严峻&#xff0c;其中勒索病毒尤为猖獗&#xff0c;它通过加密受害者的数据并要求赎金换取解密密钥&#xff0c;给个人和企业带来了巨大的经济损失。然而&#xff0c;关于安全产品是否真正有效的问题一直存在争议。本文将通过一个模拟实…

pytest+allure

安装 下载&#xff1a;github win环境下载zip 环境变量&#xff1a; pycharm&#xff1a; pip install allure-pytest 验证安装 生成结果&#xff1a; if __name__ __main__:pytest.main([-s,test_createTag2.py,--alluredir,result]) 生成报告&#xff1a; allure gener…

如何查看Kafka的偏移量offset

本文介绍三种方法查看Kafka的偏移量offset。 1. API&#xff1a;ConsumerRecord的offset()方法查看offset。 2. API&#xff1a;KafkaConsumer的position(TopicPartition partition)方法查看offset。 3. 命令行&#xff1a;kafka-consumer-groups.sh命令查看offset。 前提条…

pglogical扩展的基本用法介绍

瀚高数据库 目录 环境 文档用途 详细信息 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;14 文档用途 本文翻译了pglogical扩展的官方文档,介绍了pglogical扩展的各类管理函数及使用限制,详情请看下文. 一、节点管理 节点可以使用以下…

前置-Linux相关知识速记

linux Linux命令大全 [!IMPORTANT] chown-chmod-ls-chgrp-cdpwd-mkdir-rmdir-cp-rm-mv-cat-tac-nl-more-less-head-tail 应用领域 通常服务器使用 LAMP&#xff08;Linux Apache MySQL PHP&#xff09;或 LNMP&#xff08;Linux Nginx MySQL PHP&#xff09;组合。 目前…

STM32 BootLoader 刷新项目 (五) 获取软件版本号-命令0x51

STM32 BootLoader 刷新项目 (五) 获取软件版本号-命令0x51 下面我们来讲解第一个指令&#xff0c;获取软件版本号命令-0x51. 在BootLoader中获取软件版本号的操作有多个重要的作用&#xff0c;具体如下&#xff1a; 版本管理&#xff1a; 识别当前版本&#xff1a;通过获取软…

无人机上磁航技术详解

磁航技术&#xff0c;也被称为地磁导航&#xff0c;是一种利用地球磁场信息来实现导航的技术。在无人机领域&#xff0c;磁航技术主要用于辅助惯性导航系统&#xff08;INS&#xff09;进行航向角的测量与校正&#xff0c;提高无人机的飞行稳定性和准确性。其技术原理是&#x…

vue3 + antd vue 纯前端 基于xlsx 实现导入excel 转 json,将json数据转换XLSX导出(模版下载)

一、导入 0、关键代码 // 安装插件 npm i xlsx/yarn add xlsx // 导入xlsx import * as XLSX from xlsx; 点击提交的时候才整理数据。上传的时候文件保存在 state.form.file[0] 中的 // 定义字段映射关系 const fieldMap {sheet2json: {技能名称: skill_name,技能等级: …

qt事件类型列表

t提供了一系列丰富的事件类型&#xff0c;这些事件允许应用程序响应各种用户输入、系统通知以及其他类型的交互。以下是一些常见的Qt事件类型及其用途概述&#xff1a; QEvent::None (0): 无事件&#xff0c;用于初始化或作为默认值。 QEvent::Timer (1): 定时器事件&#xff…

(三)C语言的变量与常量

一.C语言中标识符(变量)的命名规则 (1)可以由数字、字母、下划线_组成 (2)不能以数字开头 (3)不能是关键字 (4)区分大小写 二.在C语言中定义常量的方法及其区别 1.使用#define宏定义&#xff1a;#define LENGTH 10 2.使用const关键字&#xff1a;const int LENGTH 10 或 i…

微服务实战系列之玩转Docker(六)

前言 刚进入大暑&#xff0c;“清凉不肯来&#xff0c;烈日不肯暮”&#xff0c;空调开到晚&#xff0c;还是满身汗。——碎碎念 我们知道&#xff0c;仓库可见于不同领域&#xff0c;比如粮食仓库、数据仓库。在容器领域&#xff0c;自然也有镜像仓库&#xff08;registry&…

代码随想录——零钱兑换Ⅱ(Leetcode518)

题目链接 完全背包 class Solution {public int change(int amount, int[] coins) {int[] dp new int[amount 1];dp[0] 1;for(int i 0; i < coins.length; i){for(int j coins[i]; j < amount; j){dp[j] dp[j - coins[i]];}}return dp[amount];} }本题为组合问题…

实时系统中的目标检测:速度与精度的较量

实时系统中的目标检测&#xff1a;速度与精度的较量 目标检测算法是计算机视觉领域的基石之一&#xff0c;广泛应用于实时系统中&#xff0c;如视频监控、自动驾驶汽车、工业自动化等。然而&#xff0c;将目标检测算法应用于实时系统并非易事&#xff0c;它带来了一系列技术挑…

uni-app AppStore Connect上传拒绝汇总

1.Guideline 2.3.3 - Performance - Accurate Metadata 问题是图片不对&#xff0c;最好是自己截图&#xff0c;然后用香蕉云编 上传图片合成图片 2.Guideline 5.1.2 - Legal - Privacy - Data Use and Sharing 解决办法&#xff1a;在uniapp manifest.json找到 APP常用其他…

【软考】系统集成项目管理工程师【第二版】

&#x1f44a;重要通知&#x1f44a; &#x1f44a; 1. 2024年中考上半年取消&#xff0c;改下半年&#x1f44a; &#x1f44a; 2. 2024下半年 使用《系统集成项目管理工程师教程》第三版&#x1f44a; &#x1f44a; 3. 为了方便大家学习&#xff0c;博主正在整理第三版 &am…

使用uniapp开发小程序(基础篇)

本文章只介绍微信小程序的开发流程&#xff0c;如果需要了解其他平台的开发的流程的话&#xff0c;后续根据情况更新相应的文章,也可以根据uniapp官网的链接了解不同平台的开发流程 HBuilderX使用&#xff1a;https://uniapp.dcloud.net.cn/quickstart-hx.html 开发工具 开始…