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

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
      )
    })
  })

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

马斯克拟打造xAI“算力超级工厂”,助力聊天机器人Grok

KlipC报道:马斯克计划推出xAI超级计算机,为下一代人工智能聊天机器人Grok提供动力,直言这将是一个“算力超级工厂”,并希望在2025年秋季之前能运行起来。 xAI是马斯克去年创立的人工智能初创公司,“尽可能寻求真相”、…

Vue3项目练习详细步骤(第二部分:主页面搭建)

主页面搭建 页面主体结构 路由 子路由 主页面搭建 页面主体结构 在vuews目录下新建Layout.vue文件 主页面内容主体代码 <script setup> import {Management,Promotion,UserFilled,User,Crop,EditPen,SwitchButton,CaretBottom } from element-plus/icons-vue imp…

Selenium探险家:驾驭Web自动化的秘籍与实战

Hi&#xff0c;我是阿佑&#xff0c;今天将带大伙们学会如何使用Selenium进行高效的网站测试&#xff0c;如何配置Selenium Grid实现分布式测试&#xff0c;以及如何预测和拥抱自动化测试的未来&#xff01; 文章目录 1. 引言2. 背景介绍2.1 Selenium概览2.2 Python与Selenium的…

SwiftUI中EnvironmentObject的使用(多界面共享数据)

SwiftUI的EnvironmentObject是一个强大的工具&#xff0c;它允许你在多个视图之间共享数据(使用一个可观察对象)。当你有一个复杂的视图层次结构&#xff0c;并且需要在没有直接连接的视图之间共享相同的可观察对象时&#xff0c;它特别有用。 我们之前传递数据主要是通过init…

奥枫软件Java要个16K遇到地狱级难度,醉了。。。

我只能说地狱难度&#xff0c;没绝对把握就别去了。我凭借前辈的经验&#xff0c;和当时天时地利人和&#xff0c;六道题答得很不错&#xff0c;但还是没通过。我有备而来都没过&#xff0c;现场写那些应该都是白忙活了。 一面 1&#xff0c;分割一个整数。如123&#xff0c;结…

视图【mysql数据库】

目录 一、视图的创建、查看、修改、删除 二、cascaded、local检查选项 cascaded和local的区别 三、视图的更新 四、视图的作用 一、视图的创建、查看、修改、删除 二、cascaded、local检查选项 上面的几句SQL中&#xff0c;我们虽然给视图插入了id 30的数据&#xff0c;但…

基于 vuestic-ui 实战教程 - 登录篇

1. 简介 登录做为一个系统的门面&#xff0c;也是阻挡外界的一道防线&#xff0c;那在vuestic-ui中如何做登录功能呢。在这里就之间沿用初始版本的Login页面&#xff0c;作为一个演示模板&#xff0c;后续需要改进的读者可以在此篇文章的基础上修改。 2. 登录接口相关api 与 t…

扔掉 MacBook,挑战带OrangePi出差!

背景 由于工作需要&#xff0c;博主经常会到各大企业的自建机房中私有化部署公司的软件产品。 在某些企业自建机房中&#xff0c;有时给到全新的机器&#xff0c;没有基础环境&#xff0c;甚至有的还无法互联网&#xff0c;而且因为近几年CentOS的停止更新&#xff0c;服务器…

go-zero 实战(2)

go-zero 实战&#xff08;1&#xff09; 中&#xff0c;使用了go-zero 创建了order 和 user 两个微服务。而order作为grpc的客户端&#xff0c;user 作为grpc的服务端&#xff0c;打通了 order 到 user的调用。接下来&#xff0c;我们在user中&#xff0c;加入mysql组件。确保数…

开源与闭源:AI模型发展的两条路径

目录 前言1 数据隐私保护与用户数据安全1.1 开源大模型的透明性与挑战1.2 闭源大模型的控制与责任 2 商业应用的优劣比较2.1 开源大模型的灵活性与创新2.2 闭源大模型的可靠性与服务质量 3 社区参与与合作的差异3.1 开源大模型的社区驱动与协作3.2 闭源大模型的企业主导与保密性…

四川古力未来科技抖音小店安全靠谱,购物新体验

在数字化浪潮席卷而来的今天&#xff0c;电商行业蓬勃发展&#xff0c;各种线上购物平台如雨后春笋般涌现。其中&#xff0c;抖音小店凭借其独特的短视频直播购物模式&#xff0c;迅速赢得了广大消费者的青睐。而四川古力未来科技抖音小店&#xff0c;更是以其安全靠谱、品质保…

Python OCR 文字检测使用模型:读光-文字检测-DBNet行检测模型-中英-通用领域

介绍 什么是OCR&#xff1f; OCR是“Optical Character Recognition”的缩写&#xff0c;中文意为“光学字符识别”。它是一种技术&#xff0c;可以识别和转换打印在纸张或图像上的文字和字符为机器可处理的格式&#xff0c;如计算机文本文件。通过使用OCR技术&#xff0c;可…

Qt Creator(2)【如何在Qt Creator中创建新工程】

阅读导航 引言一、Qt Creator开始界面介绍二、如何在Qt Creator中创建新工程1. 新建项目2. 选择项目模板3. 选择项目路径4. 选择构建系统5. 填写类信息设置界面6. 选择语言和翻译文件7. 选择Qt套件8. 选择版本控制系统9. 最终效果 三、认识Qt Creator项目内容界面1. 基本界面2.…

基于Vue的神影视频APP

需求说明:使用Vue脚手架进行搭建,页面简洁、精致,和一些常见的电影网站类似,例如支付宝中的“淘票票电影”。在项目中使用页面布局技术(表格,vue.js框架,DIV+CSS或者混合使用)进行页面设计,使网站功能齐全,界面美观大方,有一定的交互性。 功能分析:系统主要分为七…

翻译《The Old New Thing》- What did MakeProcInstance do?

What did MakeProcInstance do? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20080207-00/?p23533 Raymond Chen 2008年02月07日 MakeProcInstance 做了什么&#xff1f; MakeProcInstance 宏实际上什么也不做。 #define MakeProcInst…

四川农业大学Java实训项目圆满收官,汇智知了堂引领学子实践创新

近日&#xff0c;四川农业大学与汇智知了堂共同举办的Java实训项目正式迎来了项目汇报阶段。本次实训是汇智知了堂在高等教育领域深化校企合作、推动产教融合的一次重要实践&#xff0c;旨在为广大学子提供一个将理论知识与实际操作相结合的平台。 在实训过程中&#xff0c;汇…

(三)MySQL 索引

欢迎访问 什么是索引&#xff1f; 提高查询效率的一种数据结构&#xff0c;索引是数据的目录 索引的分类 按「数据结构」分类&#xff1a;Btree索引、Hash索引、Full-text索引。按「物理存储」分类&#xff1a;聚簇索引、二级索引。按「字段特性」分类&#xff1a;主键索引…

【Linux学习】进程间通信 (3) —— System V (1)

下面是有关进程通信中 System V 的相关介绍&#xff0c;希望对你有所帮助&#xff01; 小海编程心语录-CSDN博客 目录 1. System V IPC 1. 消息队列 msg 消息队列的使用方法 1.1 消息队列的创建 1.2 向消息队列发送消息 1.3 从消息队列接收消息 1.4 使用msgctl函数显式地…

拉格朗日插值及牛顿差商方法的实现(Matlab)

一、问题描述 拉格朗日插值及牛顿差商方法的实现。 二、实验目的 掌握拉格朗日插值和牛顿差商方法的原理&#xff0c;能够编写代码实现两种方法&#xff1b;能够分析多项式插值中的误差。 三、实验内容及要求 利用拉格朗日插值及牛顿差商方法估计1980 年的人口&#xff0c;并…

监控员工电脑的软件有哪些,不得不说这几款电脑监控软件太好用了

监控员工电脑的软件在市场上种类繁多&#xff0c;以下是几款备受好评的电脑监控软件&#xff0c;它们各自具有独特的功能和优势&#xff0c;选择前必须了解一下才能做成正确决定。 1.安企神&#xff1a; 这款软件支持7天试用测试&#xff0c;获取测试版请移驾 ↓↓↓ 安企神…