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

Vue实现模糊查询搜索功能

第一步 先创建一个val变量

// 用户搜索内容
let val = ref("");

第二步:给input绑定v-model (为了获取input框的值)

  <input v-model="val" type="text" placeholder="请输入行业/公司/名称"/>

第三步:给搜索框加上点击事件

<button @click="onSearch()">搜索</button>

第四步:创建一个全部的数据 arrs

let data = reactive({arrs: [],
});

最后一步: 用for循环输出

// 模糊查询事件
const onSearch = () => {let datas = [];for (let i = 0; i < data.arrs.length; i++) {data.arrs[i].content = data.arrs[i].content || "";data.arrs[i].title = data.arrs[i].title || "";if (data.arrs[i].content.indexOf(val.value) > -1 ||data.arrs[i].title.indexOf(val.value) > -1) {datas.push(data.arrs[i]);}}data.goods = datas;console.log(data.goods);// val.value = "";
};

原创作者:吴小糖

创作时间:2023.10.16

相关文章:

Vue实现模糊查询搜索功能

第一步 先创建一个val变量 // 用户搜索内容 let val ref(""); 第二步&#xff1a;给input绑定v-model &#xff08;为了获取input框的值&#xff09; <input v-model"val" type"text" placeholder"请输入行业/公司/名称"/> 第…...

(C++ STL) 详解vector模拟实现

目录 一.vector的介绍 1.vector的介绍 二.vector的定义模拟实现 三.vector各接口的模拟实现 1.vector迭代器的模拟实现 2.构造函数 2.1无参构造 2.2 n个val构造 2.3迭代器区间构造 2.4通过对象初始化&#xff08;拷贝构造&#xff09; 3.析构函数 4.size 5.operato…...

c语言从入门到实战——C语言数据类型和变量

C语言数据类型和变量 前言1. 数据类型介绍1.1 字符型1.2 整型1.3 浮点型1.4 布尔类型1.5 各种数据类型的长度1.5.1 sizeof操作符1.5.2 数据类型长度1.5.3 sizeof中表达式不计算 2. signed 和 unsigned3. 数据类型的取值范围4. 变量4.1 变量的创建4.2 变量的分类 5. 算术操作符&…...

[论文精读]Semi-Supervised Classification with Graph Convolutional Networks

论文原文&#xff1a;[1609.02907] Semi-Supervised Classification with Graph Convolutional Networks (arxiv.org) 论文代码&#xff1a;GitHub - tkipf/gcn: Implementation of Graph Convolutional Networks in TensorFlow 英文是纯手打的&#xff01;论文原文的summari…...

CICD:使用docker+ jenkins + gitlab搭建cicd服务

持续集成解决什么问题 提高软件质量效率迭代便捷部署快速交付、便于管理 持续集成&#xff08;CI&#xff09; 集成&#xff0c;就是一些孤立的事物或元素通过某种方式集中在一起&#xff0c;产生联系&#xff0c;从而构建一个有机整体的过程。 持续&#xff0c;就是指长期…...

新能源电池试验中准确模拟高空环境大气压力的解决方案

摘要&#xff1a;针对目前新能源电池热失控和特性研究以及生产中缺乏变环境压力准确模拟装置、错误控制方法造成环境压力控制极不稳定以及氢燃料电池中氢气所带来的易燃易爆问题&#xff0c;本文提出了相应的解决方案。方案的关键一是采用了低漏率电控针阀作为下游控制调节阀实…...

Python 中的模糊字符串匹配

文章目录 Python中使用thefuzz模块匹配模糊字符串使用process模块高效地使用模糊字符串匹配今天,我们将学习如何使用 thefuzz 库,它允许我们在 python 中进行模糊字符串匹配。 此外,我们将学习如何使用 process 模块,该模块允许我们借助模糊字符串逻辑有效地匹配或提取字符…...

记录一个奇怪bug

一开始Weapon脚本是继承Monobehavior的&#xff0c;实例化后挂在gameObject上跟着角色。后来改成了不继承mono的&#xff0c;也不实例化。过程都是顺利的&#xff0c;运行也没问题&#xff0c;脚本编辑器也没有错误。 但偶尔有一次报了一些错误&#xff0c;大概是说Weapon (1)…...

SpringBoot面试题7:SpringBoot支持什么前端模板?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:SpringBoot支持什么前端模板? Spring Boot支持多种前端模板,其中包括以下几种常用的: Thymeleaf:Thymeleaf是一种服务器端Java模板引擎,能够…...

leetcode做题笔记172. 阶乘后的零

给定一个整数 n &#xff0c;返回 n! 结果中尾随零的数量。 提示 n! n * (n - 1) * (n - 2) * ... * 3 * 2 * 1 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;0 解释&#xff1a;3! 6 &#xff0c;不含尾随 0示例 2&#xff1a; 输入&#xff1a;n 5 输出&a…...

linux之shell脚本练习

以下脚本已经是在ubuntu下测试的 demo持续更新中。。。 1、for 循环测试&#xff0c;&#xff0c;&#xff0c;Ping 局域网 #!/bin/bashi1 for i in {1..254} do# 每隔0.3s Ping 一次&#xff0c;每次超时时间3s&#xff0c;Ping的结果直接废弃ping-w 3 -i 0.3 192.168.110.$i…...

CSS阶详细解析一

CSS进阶 目标&#xff1a;掌握复合选择器作用和写法&#xff1b;使用background属性添加背景效果 01-复合选择器 定义&#xff1a;由两个或多个基础选择器&#xff0c;通过不同的方式组合而成。 作用&#xff1a;更准确、更高效的选择目标元素&#xff08;标签&#xff09;。…...

osWorkflow-1——osWorkflow官方例子部署启动运行(版本:OSWorkflow-2.8.0)

osWorkflow-1——osWorkflow官方例子部署启动运行&#xff08;版本&#xff1a;OSWorkflow-2.8.0&#xff09; 1. 前言——准备工作1.1 下载相关资料1.2 安装翻译插件 2. 开始搞项目2.1 解压 .zip文件2.2 简单小测&#xff08;war包放入tomcat&#xff09;2.3 导入项目到 IDE、…...

Stm32_标准库_13_串口蓝牙模块_手机与蓝牙模块通信

代码&#xff1a; #include "stm32f10x.h" // Device header #include "Delay.h" #include "OLED.h" #include "Serial.h"char News[100] "";uint8_t flag 1;void Get_Hc05News(char *a){uint32_t i 0…...

Unity中用序列化和反序列化来保存游戏进度

[System.Serializable]标记类 序列化 [System.Serializable]是一个C#语言中的属性&#xff0c;用于标记类&#xff0c;表示该类的实例可以被序列化和反序列化。序列化是指将对象转换为字节流的过程&#xff0c;以便可以将其保存到文件、数据库或通过网络传输。反序列化则是将字…...

Junit 单元测试之错误和异常处理

错误和异常处理是测试中非常重要的部分。假设我们有一个服务&#xff0c;该服务从数据库中获取用户。现在&#xff0c;我们要考虑的错误场景是&#xff1a;数据库连接断开。 整体代码示例 首先&#xff0c;为了简化&#xff0c;我们让服务层就是简单的类&#xff0c;然后使用I…...

LockSupport-park和unpark编码实战

package com.nanjing.gulimall.zhouyimo.test;import java.util.concurrent.TimeUnit; import java.util.concurrent.locks.LockSupport;/*** author zhou* version 1.0* date 2023/10/16 9:11 下午*/ public class LockSupportDemo {public static void main(String[] args) {…...

js深拷贝与浅拷贝

1.浅拷贝概念 浅拷贝是其属性与拷贝源对象的属性共享相同引用&#xff0c;当你更改源或副本时&#xff0c;也可能&#xff08;可能说的是只针对引用数据类型&#xff09;导致其他对象也发生更改。 特性&#xff1a; 会新创建一个对象&#xff0c;即objobj2返回fasle&#xf…...

Docker-harbor私有仓库部署与管理

搭建本地私有仓库 #首先下载 registry 镜像 docker pull registry #在 daemon.json 文件中添加私有镜像仓库地址 vim /etc/docker/daemon.json { "insecure-registries": ["20.0.0.50:5000"], #添加&#xff0c;注意用逗号结…...

ArcGIS笔记8_测量得到的距离单位不是米?一经度一纬度换算为多少米?

本文目录 前言Step 1 遇到测量结果以度为单位的情况Step 2 简单的笨办法转换为以米为单位Step 3 拓展&#xff1a;一经度一纬度换算为多少米 前言 有时我们会遇到这种情况&#xff0c;想在ArcGIS中使用测量工具测量一下某一段距离&#xff0c;但显示的测量结果却是某某度&…...

Halo Cursor:轻量级框架无关的动画光标库设计与实践

1. 项目概述&#xff1a;一个轻量、无框架绑定的动画光标库最近在重构一个前端项目&#xff0c;想给用户界面增加一点微妙的动态反馈&#xff0c;提升交互的精致感。我第一个想到的就是自定义光标效果。市面上这类库不少&#xff0c;但要么体积臃肿&#xff0c;要么和特定框架&…...

大语言模型越狱攻击:真实世界提示词生态与防御策略分析

1. 项目概述&#xff1a;一次对“越狱”提示词的田野调查如果你在过去一年里深度使用过ChatGPT、Claude或者国内的文心一言、通义千问这类大语言模型&#xff0c;大概率遇到过这样的情况&#xff1a;你问了一个稍微敏感点的问题&#xff0c;比如“如何制作一个恶作剧软件”&…...

OmenSuperHub:彻底释放惠普OMEN游戏本性能的终极开源解决方案

OmenSuperHub&#xff1a;彻底释放惠普OMEN游戏本性能的终极开源解决方案 【免费下载链接】OmenSuperHub 使用 WMI BIOS控制性能和风扇速度&#xff0c;自动解除DB功耗限制。 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 还在为惠普OMEN游戏本官方软件臃…...

从零到一:Windows环境下Oracle19c的完整部署与实战配置

1. 环境准备&#xff1a;搭建Oracle19c的Windows温床 第一次在Windows上装Oracle数据库就像给新房子铺水电——基础没打好&#xff0c;后面全是坑。我见过太多人因为忽略环境检查&#xff0c;导致安装到一半报错重来的惨剧。这里分享几个实测有效的准备工作&#xff1a; 硬件配…...

终极指南:如何用免费3D模型库打造你的Cherry MX个性化键帽

终极指南&#xff1a;如何用免费3D模型库打造你的Cherry MX个性化键帽 【免费下载链接】cherry-mx-keycaps 3D models of Chery MX keycaps 项目地址: https://gitcode.com/gh_mirrors/ch/cherry-mx-keycaps 想为你的机械键盘打造一套独一无二的键帽吗&#xff1f;Cherr…...

Stata 数据处理实战:时间序列数据的日期转换与聚合

1. 时间序列数据处理的常见痛点 刚接触时间序列分析的朋友们&#xff0c;经常会遇到这样的困扰&#xff1a;从Excel导入的数据明明是日期格式&#xff0c;到了Stata里却变成了看不懂的字符&#xff1b;想按周汇总销售数据&#xff0c;却发现系统根本不认识"2023-W15"…...

手把手教你给天邑TY1608机顶盒刷机(S905L3B芯片,支持RTL8822CS/MT7668无线模块)

天邑TY1608机顶盒刷机全攻略&#xff1a;从零开始玩转S905L3B芯片 第一次拿到天邑TY1608机顶盒时&#xff0c;你可能被它原厂系统的各种限制所困扰——预装软件无法卸载、广告弹窗频繁出现、存储空间严重不足。这款搭载Amlogic S905L3B芯片的设备&#xff0c;配合RTL8822CS或MT…...

FPGA硬件在环验证:GateRocket方案加速系统级调试

1. 项目概述&#xff1a;为什么FPGA验证需要“硬件在环”&#xff1f;在FPGA设计领域&#xff0c;尤其是当项目规模膨胀到数百万甚至上千万门级时&#xff0c;纯软件仿真&#xff08;Simulation&#xff09;会变成一个令人头疼的瓶颈。想象一下&#xff0c;你写了一段新的RTL代…...

LangChain RAG开发套件:模块化架构与生产级实践指南

1. 项目概述&#xff1a;一个面向RAG应用开发的“瑞士军刀”如果你正在或打算基于LangChain构建检索增强生成&#xff08;RAG&#xff09;应用&#xff0c;那么“Vargha-Kh/Langchain-RAG-DevelopmentKit”这个项目&#xff0c;很可能就是你一直在寻找的那个“工具箱”。它不是…...

让你的自定义结构体也能被qDebug优雅打印:Qt运算符重载的妙用与避坑指南

让自定义结构体与qDebug完美融合&#xff1a;Qt运算符重载实战解析 在Qt开发中&#xff0c;调试信息输出是日常开发不可或缺的环节。当项目规模扩大&#xff0c;自定义数据结构变得复杂时&#xff0c;如何优雅地输出这些结构体的调试信息就成了开发者面临的现实挑战。本文将深入…...