当前位置: 首页 > news >正文

在Vue.js中,你可以使用Element UI的el-input组件结合计算属性来实现模糊查询

<template><div><el-input v-model="searchQuery" placeholder="请输入查询内容"></el-input><div v-for="item in filteredList" :key="item">{{ item }}</div></div>
</template><script>
export default {data() {return {searchQuery: '', // 用于绑定el-input的模糊查询关键词itemList: ['AG47PB16000001', 'AG47PB16000011', 'AG47PB16000021', 'AK47PB16000004', 'AK47GB16000006', 'AG47PB16000002', 'AG47PB16000003', 'AG47PB16000004', 'AG47PB16000006'] // 假设的字符串编号数组};},computed: {// 使用计算属性来根据searchQuery的值筛选itemListfilteredList() {return this.itemList.filter(item => item.includes(this.searchQuery));}}
};
</script>

在这个例子中,el-input的v-model绑定到了searchQuery变量上,这个变量用于存储用户的输入。计算属性filteredList根据searchQuery的值,使用数组的filter方法来创建一个新的数组,该数组包含与查询匹配的字符串编号。当用户在输入框中输入时,filteredList会实时更新,显示匹配的结果。

http://www.lryc.cn/news/446668.html

相关文章:

  • delphi制作漂亮的农历窗体(IntraWeb+Layui的完美结合)
  • 发票OFD格式转换成PDF
  • 高通AI应用程序开发3:网络模型(一)
  • 03. 前端面试题之ts : typescript 的数据类型有哪些?
  • PyCharm和VS Code 安装通义灵码,可本地安装包安装,解决插件安装不上问题
  • 机器人速度雅可比矩阵求解(2自由度平面关节机器人)
  • 【AI大模型-文心-思维树解读-开篇】
  • 2、electron vue3 怎么创建子窗口,并给子窗口路由传参
  • 8.pod数据持久化
  • C语言 | Leetcode C语言题解之第436题寻找右区间
  • SpringBoot3中ymal配置文件(持续更新)
  • Linux 基础IO 2
  • 图像预处理 图像去噪之常见的去噪方法
  • 代码随想录Day53|102.沉没孤岛 、103.水流问题 、104.建造最大岛屿
  • 19c-pfile
  • 智能软件开启精准品牌控价
  • OpenCV特征检测(8)检测图像中圆形的函数HoughCircles()的使用
  • spark 大表与大表join时的Shuffle机制和过程
  • 大厂面试真题:简单说下Redis的bigkey
  • 18 vue3之自动引入ref插件深入使用v-model
  • 【Spring】lombok、dbUtil插件应用
  • 【学习笔记】WSL
  • python assert 断言用法
  • MySQL事务、索引、数据恢复和备份
  • 什么是chatgpt?国内有哪些类gpt模型?
  • ISP基本框架及算法介绍 ISP(Image Signal Processor)
  • Stable Diffusion 的 ControlNet 主要用途
  • 矩阵分析 学习笔记4 内积与Gram矩阵
  • iOS 消息机制详解
  • 深入理解Spring Data JPA与接口编程