当前位置: 首页 > 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;但显示的测量结果却是某某度&…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...