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

vue2  computed实现

  computed: {FBAAddressListComputed () {if (!this.fbaInput) return this.FBAAddressListconst 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.valuereturn}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.mzph.cn/bicheng/14941.shtml

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

相关文章

Python列表,元组,集合,字典详解一篇搞懂

目录 介绍 列表(List) 集合(Set) 字典(Dict) 元组(Tuple) 列表 列表定义 ​编辑 列表切片 列表常用方法 append extend ​编辑 insert ​编辑 remove pop ​编辑 clear ​编辑 列表修改元素 sort 升序 倒序 reverse count ​编辑 index 浅拷贝和深拷贝 …

《书生·浦语大模型实战营》第一课 学习笔记:书生·浦语大模型全链路开源体系

文章大纲 1. 简介与背景智能聊天机器人与大语言模型目前的开源智能聊天机器人与云上运行模式 2. InternLM2 大模型 简介3. 视频笔记:书生浦语大模型全链路开源体系内容要点从模型到应用典型流程全链路开源体系 4. 论文笔记:InternLM2 Technical Report简介软硬件基础…

基于Java的地震震中附近城市分析实战

目录 前言 一、空间数据说明 1、空间查询 二、Java后台开发 1、模型层设计与实现 2、控制层设计与实现 三、Leaflet地图开发 1、地震震中位置展示 2、附近城市展示 3、成果展示 总结 前言 随着全球气候变化和地壳活动的不断演变,地震作为一种自然灾害&…

第十三节:带你梳理Vue2 : watch侦听器

官方解释:> 观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式&#xff0c;用一个函数取代<br/>## 1. 侦听器的基本使用侦听器可以监听data对象属性或者计算属性的变化watch是观察属性的…

现代C++ 如何使用 Lambda 使代码更具表现力、更容易理解?

使用 Lambda 使代码更具表现力 一、Lambda VS. 仿函数二、总结 一、Lambda VS. 仿函数 Lambda 是 C11 中最引人注目的语言特性之一。它是一个强大的工具&#xff0c;但必须正确使用才能使代码更具表现力&#xff0c;而不是更难理解。 首先&#xff0c;要明确的是&#xff0c;…

向npm发布自己写的vue组件,使用vite创建项目

向npm发布自己写的vue组件&#xff0c;使用vite创建项目 创建项目 pnpm create vite输入项目名称 由于我的组件是基于 ant-design-vue和vue的&#xff0c;需要解析.vue文件&#xff0c;我又安装了下面4个。 然后执行 pnpm i安装依赖 vite.config.ts import { defineC…

防范TOCTOU竞态条件攻击

防范TOCTOU竞态条件攻击 在软件开发过程中&#xff0c;我们常常会遇到需要在使用资源之前检查其状态的情况。然而&#xff0c;如果资源的状态在检查和使用之间发生了变化&#xff0c;那么检查的结果可能会失效&#xff0c;导致软件在资源处于非正常状态时执行无效操作。这种时…

[datawhale202405]从零手搓大模型实战:TinyAgent

结论速递 TinyAgent项目实现了一个简单的Agent智能体&#xff0c;主要是实现了ReAct策略&#xff08;推理调用工具的能力&#xff09;&#xff0c;及封装了一个Tool。 项目实现有一定的疏漏。为了正确运行代码&#xff0c;本次对代码Agent部分进行了简单修改&#xff08;完善…

windows安装rocketmq

1.下载连接 https://rocketmq.apache.org/download/ 2.解压到D盘下&#xff08;其他位置也可以&#xff09; 3.配置环境变量 需要有jdk环境 新建ROCKETMQ_HOME&#xff0c;刚刚解压的位置 编辑Path&#xff0c;新增%ROCKETMQ_HOME%\bin 4.启动mqnameserver 进入安装bin目录下…

交叉编译——

什么是交叉编译 交叉编译 是在一个平台上生成临海一个平台可执行代码. eg.在windows上面编写C51代码&#xff0c;并编译生成可执行代码。如xx.hex 我们在Ubuntu上编写树莓派的代码&#xff0c;并编译成可执行代码。a.out. 是在树莓派上运行&#xff0c;不在Ubuntu Linux上面运…

便携式iv测试仪特点

TH-PV30便携式IV测试仪是一种用于测量半导体器件电学特性的设备&#xff0c;它具有体积小、重量轻、便于携带等特点&#xff0c;广泛应用于半导体行业、科研实验室以及教育领域。 该测试仪的工作原理基于四探针法&#xff0c;通过在半导体器件表面放置四个金属探针&#xff0c…

【vs2022】安装copilot和reshaper

直接安装新版vs 17.10 自带集成的copilot支持安装resharper 可以跳过市场里的reshper安装好后依然可以直接使用vs。 resharper 2024.1.2 市场里还是i老版本&#xff1a; copilot 不兼容,这个是之前市场安装的版本 官方建议用vs intall 安装 安裝 GitHub Copilot GitHub.Co…

详解http协议

什么是HTTP协议 定义 Http协议即超文本传送协议 (HTTP-Hypertext transfer protocol) 。 它定义了浏览器&#xff08;即万维网客户进程&#xff09;怎样向万维网服务器请求万维网文档&#xff0c;以及服务器怎样把文档传送给浏览器。从层次的角度看&#xff0c;HTTP是面向&am…

第四十一天 | 62.不同路径 63.不同路径|| 343.整数拆分 96.不同的二叉搜索树

题目&#xff1a;62.不同路径 1.二维dp数组dp[i][j]含义&#xff1a;到达&#xff08;i&#xff0c;j&#xff09;位置有dp[i][j]种方法。 2.动态转移方程&#xff1a;dp[i][j] dp[i - 1][j] dp[i][j - 1] 3.初始化&#xff1a;dp[0][j] 1, dp[i][0] 1 &#xff08;第一…

uniapp 安卓 Pc端真机浏览器调试

下载插件:真机模拟浏览器 1. 安装, 每次启用时使用usb 线连接电脑, 并且打开手机或者POS (调试设备)开发者模式, 比如我的是pos 机 则在系统设置中找到版本号,点击多次就会触发开发者模式 2.打开真机模拟软件,打开后会打开一个浏览器,如果想要模拟google的浏览器则 在浏览器地…

精准键位提示,键盘盲打轻松入门

在说明精准键位提示之前&#xff0c;我们先来看一张图&#xff1a; 这是一张标准的基准键位图&#xff0c;也就是打字时我们双手的8个手指放在基准键位上&#xff0c;在打不同的字母时&#xff0c;我们的手指以基准键位为中心&#xff0c;或上、或下、或左、或右&#xff0c;在…

《拯救大学生课设不挂科第二期之Windows11下安装VC6.0(VC++6.0)与跑通Hello,World!程序教程》【官方笔记】

背景与目标人群&#xff1a; 大学第一次学C语言的时候&#xff0c;大部分老师会选择VC6这个编辑器。 但由于很多人是新手&#xff0c;第一次上大学学C语言。 老师要求VC6.0&#xff08;VC6.0&#xff09;写C语言跑程序可能很多人还是第一次接触电脑。 需要安装VC6这个编辑器…

Docker常用软件安装

文章目录 1.安装Tomcat1.docker hub查找镜像并复制拉取镜像命令2.拉取镜像到本地1.执行官网命令2.查看是否拉取成功 3.启动tomcat4.退出和重启1.由于是以交互方式启动的&#xff0c;所以不方便&#xff0c;直接ctrl c退出2.查看当前的容器3.使用docker start 命令启动容器&…

【cocos creator 】生成六边形地图

想要生成一个六边形组成的地图 完整代码示例 以下是完整的代码示例&#xff0c;包含了注释来解释每一步&#xff1a; cc.Class({extends: cc.Component,properties: {hexPrefab: {default: null,type: cc.Prefab},mapWidth: 10, // 网格的宽度&#xff08;六边形的数量&am…

【Flutter】线性布局弹性布局层叠布局

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;Flutter学习 &#x1f320; 首发时间&#xff1a;2024年5月25日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e; 目…