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

Applite:Mac软件管理的图形化革命,告别命令行操作

Applite&#xff1a;Mac软件管理的图形化革命&#xff0c;告别命令行操作 【免费下载链接】Applite User-friendly GUI macOS application for Homebrew Casks 项目地址: https://gitcode.com/gh_mirrors/ap/Applite 还在为Mac软件安装更新而烦恼吗&#xff1f;Applite作…...

HoRain云--PHP操作MySQL:三种创建数据库方法详解

&#x1f3ac; HoRain 云小助手&#xff1a;个人主页 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个超棒的服务器购买网站&#xff0c;性价比超高&#xff0c;大内存超划算&#xff01;忍不住分享一下给大家。点击跳转到网站。 目录 ⛳️ 推荐 …...

Loop:Mac窗口管理的终极免费解决方案,告别杂乱桌面

Loop&#xff1a;Mac窗口管理的终极免费解决方案&#xff0c;告别杂乱桌面 【免费下载链接】Loop Window management made elegant. 项目地址: https://gitcode.com/GitHub_Trending/lo/Loop 你是否曾为Mac上杂乱的窗口而烦恼&#xff1f;当多个应用同时打开时&#xff…...

从入门到精通:Python开发在Web后端的实战应用

在当今快速发展的互联网时代&#xff0c;Web后端开发作为连接前端界面与数据库的核心&#xff0c;其重要性不言而喻。Python&#xff0c;凭借其简洁的语法、强大的库支持以及活跃的社区&#xff0c;已成为Web后端开发的热门选择。本文将带你从零开始&#xff0c;逐步掌握Python…...

【DeepSeek安全防护权威指南】:20年攻防专家亲授Prompt注入3大高危场景与7层防御体系

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek Prompt注入防护的演进与现状 随着 DeepSeek 系列大模型在企业级场景中的深度部署&#xff0c;Prompt 注入攻击已从理论威胁演变为高频真实风险。早期防护策略依赖于简单的关键词过滤和长度截断…...

从OpenClaw到memU Bot:企业级AI代理的记忆优先架构与实战部署

1. 项目概述&#xff1a;从个人助手到企业级AI代理的跃迁如果你和我一样&#xff0c;是OpenClaw的早期用户&#xff0c;那你一定体验过那种“私人AI管家”带来的便利。它能帮你写邮件、查资料、整理文件&#xff0c;就像一个随时待命的数字伙伴。但当我们尝试在团队内部推广&am…...

如何将Android电视变身全能上网终端:TV Bro电视浏览器终极指南

如何将Android电视变身全能上网终端&#xff1a;TV Bro电视浏览器终极指南 【免费下载链接】tv-bro Simple web browser for android optimized to use with TV remote 项目地址: https://gitcode.com/gh_mirrors/tv/tv-bro 还在为智能电视上网操作困难而烦恼吗&#xf…...

如何用Python操控Photoshop?3步实现自动化图像处理的终极指南

如何用Python操控Photoshop&#xff1f;3步实现自动化图像处理的终极指南 【免费下载链接】photoshop-python-api Python API for Photoshop. 项目地址: https://gitcode.com/gh_mirrors/ph/photoshop-python-api Photoshop Python API是一个革命性的工具&#xff0c;让…...

文件分片上传接口(Easyswoole)被nginx拦截,并返回状态码400和408的抓包排查过程

场景&#xff1a;前端上传的视频文件过大&#xff0c;做了一个分片上传的接口&#xff0c; 调试接口的时候&#xff0c;后端EasySwoole程序接收不到请求&#xff0c;前端发现接口返回状态码408遇到的问题&#xff1a;一个文件分三片上传&#xff0c;第一次请求接口正常&#xf…...

[具身智能-694]:万物皆智能,万物皆 ROS2:未来所有带感知、能运动、可交互的硬件终端,都能用 ROS2 做底座,智能普惠全域设备。万物接入 ROS2,就是接入标准化、开源化、互联化的智能时代。

一、为什么说「万物皆智能」从传统机电设备 → 感知 决策 执行一体化&#xff1a;普通家电、工业设备、移动载体、穿戴设备、楼宇设施&#xff0c;都在加传感器、算力、通信、自主决策&#xff0c;不再是被动受控&#xff0c;而是具备自主感知、逻辑判断、联动协作的智能属性…...