vue2-computed,vue3+watch 前端实现列表搜索,结合filter+some+indexOf

news2025/1/13 10:11:40

vue2  computed实现

  computed: {
    FBAAddressListComputed () {
      if (!this.fbaInput) return this.FBAAddressList

      const lowerCaseInput = this.fbaInput.toLowerCase()

      return this.FBAAddressList.filter((item) => {
        return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city,             
            item.address].some(
          (field) => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1
        )
      })
    },
  },

vue3 通过 watch 实现搜索 

  watch(fbaInput, newV => {
    if (fbaInput.value === '') {
      searchFbaList.value = FBAAddressList.value
      return
    }

    const lowerCaseInput = fbaInput.value.toLowerCase()
    searchFbaList.value = FBAAddressList.value.filter(item => {
      return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city,             
        item.address].some(
        field => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1
      )
    })
  })

 

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

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

相关文章

Cisco Nexus Leaf上线注册到APIC,并配置带外管理IP操作方法

现场2台Nexus93108交换机需要注册到APIC上,成为Leaf交换机。 在ACI的架构中,所有Leaf节点交换机要连接到SPINE交换机上,我们的spine交换机型号为Nexus 9364 Leaf N93108TC-EX长这样, 前面是48个万兆电口,后面6个端口支持40G或100…

视觉与数据的和谐:数字孪生技术在UI设计中的艺术

视觉与数据的和谐:数字孪生技术在UI设计中的艺术 引言 在UI设计的世界里,视觉艺术与数据科学似乎相隔甚远,然而随着数字孪生技术的出现,这两者之间的界限变得模糊。数字孪生技术不仅是一种技术革新,更是一种艺术形式…

基于Matlab卷积神经网络人脸识别

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 人脸识别作为计算机视觉领域的关键技术之一,具有广泛的应用前景,如安全…

网络安全知识核心20要点

1、什么是SQL注入攻击 概述 攻击者在 HTTP 请求中注入恶意的 SQL 代码,服务器使用参数构建数据库 SQL 命令时,恶意SQL 被一起构造,并在数据库中执行。 注入方法 用户登录,输入用户名 lianggzone,密码‘ or ‘1’’…

YashanDB与慧点科技完成兼容互认证

近日,深圳计算科学研究院崖山数据库系统YashanDB与慧点科技顺利完成兼容性互认证。经严格测试,双方产品完全兼容,稳定运行,共同支撑政府、企业、金融等办公应用场景下的数字化转型升级,为企业的信息技术应用创新提供坚…

我用 Midjourney 的这种风格治愈了强迫症

在 Midjourney 能够实现的各种布局之中,有两种风格因其简洁、有序而独居魅力,它们就是平铺 (Flat Lay) 和 Knolling (Knolling 就是 Knolling, 无法翻译🤣)。要在现实生活中实现这样的美学效果并不容易,你需要精心挑选各种小物件&…

基于SSM的“医院门诊管理系统”的设计与实现(源码+数据库+文档)

基于SSM的“医院门诊管理系统”的设计与实现(源码数据库文档) 开发语言:Java 数据库:MySQL 技术:SSM 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能模块图 医院门诊管理系统首页页面图 用户登录界面图 管…

springBoot+springSecurity基本认证流程

springBootspringSecurity认证流程 整合springSecurity 对应springboot版本&#xff0c;直接加依赖&#xff0c;这样版本不会错 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId…

CSRF 攻击

概述 CSRF(Cross-site request forgery,跨站请求伪造)。 它是指攻击者利用了用户的身份信息&#xff0c;执行了用户非本意的操作。 它首先引导用户访问一个危险网站&#xff0c;当用户访问网站后&#xff0c;网站会发送请求到被攻击的站点&#xff0c;这次请求会携带用户的c…

机器学习之常用算法与数据处理

一、机器学习概念&#xff1a; 机器学习是一门多领域交叉学科&#xff0c;涉及概率论、统计学、计算机科学等多门学科。它的核心概念是通过算法让计算机从数据中学习&#xff0c;改善自身性能。机器学习专门研究计算机怎样模拟或实现人类的学习行为&#xff0c;以获取新的知识…

RangeNet++ 检测3D点云语义算法的详细配置和常见问题

配置环境&#xff1a; Ubuntu18.04 GPU&#xff1a;GeForce MX150 驱动&#xff1a;Ubuntu推荐的nvidia-driver-470 Cuda10.1 cudnn7.6.2 TensorRT 5.1.5.0GCC 7.5.0 运行代码&#xff1a; RangeNet 目录 目录 一、环境配置 1. Ubuntu 18.04 安装NVIDIA驱动 &…

[Spring Cloud] (9)XSS拦截器

文章目录 简述本文涉及代码已开源Fir Cloud 完整项目防XSS攻击必要性&#xff1a;作用&#xff1a; 整体效果后端增加拦截器开关配置pom中增加jsoup依赖添加JSON处理工具类添加xss拦截工具类防XSS-请求拦截器 前端 简述 本文涉及代码已开源 本文网关gateway&#xff0c;微服务…

基于Matlab实现BP神经网络的手写数字识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 手写数字识别是计算机视觉和模式识别领域的一个经典问题&#xff0c;具有广泛的应用场景&…

信息安全从业者书单推荐

作为一名网安人&#xff0c;身上肩负的责任是很大的&#xff0c;能力越大&#xff0c;责任也越大&#xff0c;反过来责任越大&#xff0c;能力也必须跟得上。不管是想进这行&#xff0c;还是已经在这行&#xff0c;持续学习肯定是不能缺少的&#xff0c;除了在工作中积累&#…

C++ 求 f(x) = sin x / x 的函数极限

Python&#xff1a; import sympy from sympy import oo #注意无究符号表示形式为两个小定字母o import numpy as np x sympy.Symbol(x) #注意Symbol首字母大写f sympy.sin(x) / x # 定义极限表达式lim sympy.limit(f,x,oo) print(lim)输出&#xff1a; 0 C #include…

Windows系统安装dlib及face_recognition搭建人脸识别环境

关于face_recognition face_recognition被称为世界上最简洁的人脸识别库&#xff0c;借助face_recognition库&#xff0c;我们可以使用Python和命令行提取、识别、操作人脸。 face_recognition的人脸识别是基于业内领先的C开源库 dlib中的深度学习模型&#xff0c;用Labeled …

Centos 7.9 使用 iso 搭建本地 YUM 源

Centos 7.9 使用 iso 搭建本地 YUM 源 1 建立挂载点 [rootlocalhost ~]# mkdir -p /media/cdrom/ 2 创建光盘存储路径 [rootlocalhost ~]# mkdir -p /mnt/cdrom/ 3 上传 CentOS-7-x86_64-Everything-2207-02.iso 到 光盘存储路径 [rootlocalhost ~]# ls /mnt/cdrom/ CentOS-…

基于SSM的“酒店管理系统”的设计与实现(源码+数据库+文档)

基于SSM的“酒店管理系统”的设计与实现&#xff08;源码数据库文档) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SSM 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 首页 管理员登录页面 用户管理页面 客房信息查询 酒店详细信息 后台…

Java学习路线思维导图

目录 Java学习流程1.学习大纲2.Java开发中常用的DOS命令 Java入门学习思维导图 Java学习流程 通过大纲了解学习的重点&#xff0c;通过目录依次深入【注&#xff1a;Java环境的搭建百度&#xff0c;提升自己百度的能力】 1.学习大纲 学习流程如下&#xff1a; Java基础语法 …

【Python】用于发送电子邮件的标准库smtplib和构建邮件主体、添加附件、设置收件人的email

欢迎来到《小5讲堂》 这是《Python》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 插件介绍邮件代码扩展知识点文章推荐 插件介绍 smtplib 是 Pytho…