vue5种模糊查询方式

在Vue中,有多种方式可以实现模糊查询。以下是五种常见的模糊查询方式:

  1. 使用JavaScript的filter()方法:使用filter()方法可以对数组进行筛选,根据指定的条件进行模糊查询。例如:
data() {return {items: [{ name: 'Apple' },{ name: 'Banana' },{ name: 'Orange' },{ name: 'Grapes' }],searchKeyword: ''}
},
computed: {filteredItems() {return this.items.filter(item => item.name.includes(this.searchKeyword));}
}

在上面的示例中,我们使用filter()方法对items数组进行筛选,只返回包含searchKeyword关键字的项。

  1. 使用Vue的v-for指令和计算属性:使用v-for指令可以遍历数组,并结合计算属性进行模糊查询。例如:
<template><div><input type="text" v-model="searchKeyword"><ul><li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li></ul></div>
</template><script>
export default {data() {return {items: [{ id: 1, name: 'Apple' },{ id: 2, name: 'Banana' },{ id: 3, name: 'Orange' },{ id: 4, name: 'Grapes' }],searchKeyword: ''}},computed: {filteredItems() {return this.items.filter(item => item.name.includes(this.searchKeyword));}}
}
</script>

在上面的示例中,我们使用v-for指令遍历filteredItems计算属性的结果,只渲染包含searchKeyword关键字的项。

  1. 使用Vue的watch属性:使用watch属性可以监听searchKeyword的变化,并在变化时执行相应的操作。例如:
data() {return {items: [{ name: 'Apple' },{ name: 'Banana' },{ name: 'Orange' },{ name: 'Grapes' }],searchKeyword: ''}
},
computed: {filteredItems() {return this.items.filter(item => item.name.includes(this.searchKeyword));}
},
watch: {searchKeyword(newValue) {console.log('搜索关键字变化为:', newValue);}
}

在上面的示例中,我们使用watch属性监听searchKeyword的变化,并在变化时输出搜索关键字的值。

  1. 使用第三方库(Fuse.js):
    Fuse.js是一个轻量级的模糊查询库,可以用于在前端执行高级的模糊查询操作。以下是使用Fuse.js实现模糊查询的示例:
<template><div><input type="text" v-model="searchKeyword"><ul><li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li></ul></div>
</template><script>
import Fuse from 'fuse.js';export default {data() {return {items: [{ id: 1, name: 'Apple' },{ id: 2, name: 'Banana' },{ id: 3, name: 'Orange' },{ id: 4, name: 'Grapes' }],searchKeyword: ''}},computed: {filteredItems() {const fuse = new Fuse(this.items, { keys: ['name'] });const result = fuse.search(this.searchKeyword);return result.map(item => item.item);}}
}
</script>

在上面的示例中,我们首先使用import语句导入Fuse.js库。然后在filteredItems计算属性中,我们创建了一个Fuse实例,通过keys选项指定了要进行模糊查询的字段。然后我们调用search()方法执行模糊查询,并将结果映射为原始数据项。

  1. 使用后端API:
    如果您的数据存储在后端数据库中,您可以使用后端API来执行模糊查询。以下是一个简单的示例:
// 后端代码(Node.js + Express.js)
app.get('/items', (req, res) => {const searchKeyword = req.query.keyword;// 执行模糊查询操作,查询关键字为searchKeyword// 返回匹配的结果
});// 前端代码(Vue.js)
<template><div><input type="text" v-model="searchKeyword"><ul><li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li></ul></div>
</template><script>
export default {data() {return {items: [],searchKeyword: ''}},computed: {filteredItems() {// 发送请求到后端API,将查询关键字作为参数传递// 接收后端返回的匹配结果}},mounted() {// 在组件挂载时获取初始数据// 可以发送请求到后端API获取所有数据项}
}
</script>

在上面的示例中,我们假设后端使用Node.js和Express.js框架。后端提供了一个/items的GET路由,可以接收查询关键字作为keyword参数。在前端,我们使用v-model指令绑定输入框的值到searchKeyword属性,并在filteredItems计算属性中发送请求到后端API,将查询关键字作为参数传递。后端执行模糊查询操作,并返回匹配的结果。

请注意,以上示例只是简单的示例,实际情况下您需要根据您的具体后端框架和数据库进行相应的调整。

第5种方案使用后端API进行模糊查询适用于以下场景:

  1. 大规模数据:如果您的数据量很大,使用前端库进行模糊查询可能会导致性能问题。在这种情况下,将模糊查询的操作放在后端可以更好地处理大规模数据。

  2. 安全性:有些数据可能包含敏感信息,不适合直接在前端进行查询。通过后端API进行模糊查询可以更好地保护数据的安全性。

  3. 多平台应用:如果您的应用有多个前端平台(如Web、移动端、桌面应用等),使用后端API进行模糊查询可以实现统一的查询逻辑,避免在每个前端平台都实现一次模糊查询。

优点:

  • 可以处理大规模数据,避免前端性能问题。
  • 提供更好的数据安全性。
  • 可以实现多平台应用的统一查询逻辑。

缺点:

  • 需要额外的后端开发工作,增加了开发成本。
  • 增加了网络请求的开销,可能会影响查询的响应时间。
  • 需要考虑后端的性能和可扩展性,以应对高并发查询请求。

综上所述,使用后端API进行模糊查询适用于处理大规模数据、保护数据安全性以及实现多平台应用的场景。但需要注意开发成本和网络请求开销,以及后端的性能和可扩展性。根据您的具体需求和应用场景,选择适合的方案来实现模糊查询功能。

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

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

相关文章

接口自动化测试(添加课程接口调试,调试合同上传接口,合同列表查询接口,批量执行)

1、我们把信息截取一下 1.1 添加一个新的请求 1.2 对整个请求进行保存&#xff0c;Ctrl S 2、这一次我们添加的是课程添加接口&#xff0c;以后一个接口完成&#xff0c;之后Ctrl S 就能够保存 2.1 选择方法 2.2 设置请求头&#xff0c;参数数据后期我们通过配置设置就行 3、…

收银一体化-亿发2023智慧门店新零售营销策略,实现全渠道运营

伴随着互联网电商行业的兴起&#xff0c;以及用户理念的改变&#xff0c;大量用户从线下涌入线上&#xff0c;传统的线下门店人流量急剧收缩&#xff0c;门店升级几乎成为了每一个零售企业的发展之路。智慧门店新零售收银解决方案是针对传统零售企业面临的诸多挑战和问题&#…

Mathematica 与 Matlab 常见复杂指令集汇编

Mathematica 常见指令汇编 Mathematica 常见指令 NDSolve 求解结果的保存 sol NDSolve[{y[x] x^2, y[0] 0, g[x] -y[x]^2, g[0] 1}, {y, g}, {x, 0, 1}]; numericSoly sol[[1, 1, 2]]; numericSolg sol[[1, 2, 2]]; data Table[{x, numericSoly[x], numericSolg[x]},…

JVM——类加载器

回顾一下类加载过程 类加载过程&#xff1a;加载->连接->初始化。连接过程又可分为三步:验证->准备->解析。 一个非数组类的加载阶段&#xff08;加载阶段获取类的二进制字节流的动作&#xff09;是可控性最强的阶段&#xff0c;这一步我们可以去完成还可以自定义…

【计算机网络篇】UDP协议

✅作者简介&#xff1a;大家好&#xff0c;我是小杨 &#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; UDP协议 1&#xff0c;UDP 简介 UDP&#xff08;User Datagram Protocol&#xff09;是一种无连…

Flink学习笔记(一)

流处理 批处理应用于有界数据流的处理&#xff0c;流处理则应用于无界数据流的处理。 有界数据流&#xff1a;输入数据有明确的开始和结束。 无界数据流&#xff1a;输入数据没有明确的开始和结束&#xff0c;或者说数据是无限的&#xff0c;数据通常会随着时间变化而更新。 在…

Kaptcha的基本应用

Kaptcha Kaptcha 是一个用于生成和验证验证码的 Java 库&#xff0c;提供了丰富的生成和验证功能&#xff0c;并支持自定义配置。它可以用于增加应用程序的安全性&#xff0c;防止机器人和恶意攻击。 Kaptcha 可以生成各种类型的验证码&#xff0c;包括数字、字母、数字字母组…

KDD 2023 获奖论文公布,港中文、港科大等获最佳论文奖

ACM SIGKDD&#xff08;国际数据挖掘与知识发现大会&#xff0c;KDD&#xff09;是数据挖掘领域历史最悠久、规模最大的国际顶级学术会议&#xff0c;也是首个引入大数据、数据科学、预测分析、众包等概念的会议。 今年&#xff0c;第29届 KDD 大会于上周在美国加州长滩圆满结…

HTTP--Request详解

请求消息数据格式 请求行 请求方式 请求url 请求协议/版本 GET /login.html HTTP/1.1 请求头 客户端浏览器告诉服务器一些信息 请求头名称: 请求头值 常见的请求头&#xff1a; User-Agent&#xff1a;浏览器告诉服务器&#xff0c;我访问你使用的浏览器版本信息 可…

蓝桥杯每日N题 (消灭老鼠)

大家好 我是寸铁 希望这篇题解对你有用&#xff0c;麻烦动动手指点个赞或关注&#xff0c;感谢您的关注 不清楚蓝桥杯考什么的点点下方&#x1f447; 考点秘籍 想背纯享模版的伙伴们点点下方&#x1f447; 蓝桥杯省一你一定不能错过的模板大全(第一期) 蓝桥杯省一你一定不…

【日常积累】HTTP和HTTPS的区别

背景 在运维面试中&#xff0c;经常会遇到面试官提问http和https的区别&#xff0c;今天咱们先来简单了解一下。 超文本传输协议HTTP被用于在Web浏览器和网站服务器之间传递信息&#xff0c;HTTP协议以明文方式发送内容&#xff0c;不提供任何方式的数据加密&#xff0c;如果…

09- DMA(DirectMemoryAccess直接存储器访问)

DMA 09 、DMA(DirectMemoryAccess直接存储器访问)DMA配置流程 09 、DMA(DirectMemoryAccess直接存储器访问) DMA配置流程 dma.c文件 main.c文件 详见《stm32中文参考手册》表57。

tsconfig.json和jsconfig.json配置

{// 编译选项"compilerOptions": {// 生成代码的语言版本&#xff1a;将我们写的 TS 代码编译成哪个版本的 JS 代码// 命令行&#xff1a; tsc --target es5 11-测试TS配置文件.ts"target": "es5",// 指定要包含在编译中的 library"lib&quo…

3年 Android 开发的面试心经(后悔当初没有拿 N+1)

作者&#xff1a;勇闯天涯 当某人顺利通过大厂面试时&#xff0c;总会有人认为这是运气比较好罢了&#xff0c;但他们不曾得知对方之前受过多少苦和委屈&#xff0c;又付出了多少努力一步步去突破这些困境。正是因为他们的努力付出&#xff0c;在合适的时间与地点&#xff0c;用…

SSH连接工具汇总

xshell 这是个熟悉的软件啦&#xff0c;目前我正在使用Xshell_7 链接&#xff1a;https://www.xshell.com/zh/xshell/ FinalShell 国产软件&#xff0c;有windows和MAC版本&#xff1b;使用方便而且免费&#xff0c;但是软件比较占用内存。但是都2021年了&#xff0c;笔记本…

AlphaZero能否从围棋和国际象棋飞跃到量子计算?

一项新的研究表明&#xff0c;DeepMind惊人的游戏算法AlphaZero可以帮助释放量子计算的力量和潜力。 自两年多前出现以来&#xff0c;AlphaZero一再证明了其快速学习能力&#xff0c;将自己提升到围棋&#xff0c;国际象棋和将棋&#xff08;日本象棋&#xff09;的特级大师级别…

VHDL记录

文章目录 使用function名称作为“常量”numeric_std包集中使用乘法的注意项variable的使用对于entity设置属性的方法在entity声明中嵌入function的定义VHDL仿真读写文件File declaration/File handingFile readingFile writing小例子 使用函数 模块中打印出调试信息 使用functi…

RTC实验

一、RTC简介 RTC(Real Time Clock)即实时时钟&#xff0c;它是一个可以为系统提供精确的时间基准的元器件&#xff0c;RTC一般采用精度较高的晶振作为时钟源&#xff0c;有些RTC为了在主电源掉电时还可以工作&#xff0c;需要外加电池供电BCD码&#xff0c;四位二进制表示一位…

Java Persistence APl(JPA)——JPA是啥? SpringBoot整合JPA JPA的增删改查 条件模糊查询 多对一查询

目录 引出Jpa是啥&#xff1f;Jpa的使用创建实体类写dao接口类写服务类 crud增删改查增加修改根据id删除全查询分页查询 条件查询模糊查询单条件查询多条件查询模糊查询排序查询 多对一查询定义实体类auto主键策略下新增进行全查询测试 全部代码application.yml配置类pom配置文…

Java反射机制是什么?

Java反射机制是 Java 语言的一个重要特性。 在学习 Java 反射机制前&#xff0c;大家应该先了解两个概念&#xff0c;编译期和运行期。 编译期是指把源码交给编译器编译成计算机可以执行的文件的过程。在 Java 中也就是把 Java 代码编成 class 文件的过程。编译期只是做了一些…