输入框输入关键字 下拉框的关键字高亮

直接上代码
在这里插入图片描述

//搜索框部分
<div><input v-model='keyWord' /><button @click='seachFn'>搜索</button>
</div>
//下拉框部分
<div><div v-html="item.name" v-for='item in droplist' :key='item.id'></div>
</div>
<script>export default { data(){return {keyWord:'',droplist:[]}},methods:{seachFn(){//	假设后台返回的数据const res = [{id: '2',name: ' 哈哈测试号'}, {id: '3',name: '孙悟空大妖怪测试'}, {id: '5',name: '测试白骨精'}, {id: '6',name: '测试号'}]this.droplist = res.map(item => {if (item.name.indexOf(this.keyWord) != -1) {//对关键字 进行处理let str=`<span style='color:red'>${this.keyWord}</span>`item.name =`<div>${item.name.replace(this.keyWord,str)}</div>`}return item})}}}
</script>

水平有限难免有纰漏,欢迎纠错

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

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

相关文章

SpringBoot 入门教程

1.复习SSM项目中&#xff0c;用spring&#xff0c;mybatis,springmvc这三个框架整合的项目。 SSM项目的所有类&#xff0c;这是用SSM整合一个搜索书籍种类和呈现的前端和后端的ssm的小项目。 2.springboot如何去开发这个页面&#xff1a; 新建springboot项目&#xff0c;勾选对…

FTP文件传输与vsftpd配置

一 存储类型 直连式存储DAS 适用于那些数据量不大&#xff0c;对磁盘访问速度要求较高的中小企业 存储区域网络SAN 用来存储非结构化数据&#xff0c;虽然受限于以太网的速度&#xff0c;但是部署灵活&#xff0c;成本低 网络附加存储NAS 适用于大型应用或数据库系统&…

SpringBoot SaToken Filter如用使用ControllerAdvice统一异常拦截

其实所有的Filter都是一样的原理 大致流程: 创建一个自定义Filter, 用于拦截所有异常此Filter正常进行后续Filter调用当调用后续Filter时, 如果发生异常, 则委托给HandlerExceptionResolver进行后续处理即可 以sa-token的SaServletFilter为例 首先注册SaToken的过滤器 pac…

字符型在内存中的存储

由于此字符型只占一个字节 所以它就不存在大端存储和小端存储。 字符型数据在内存中的存储的是ASCII码值转换成的二进制的补码&#xff08;有符号char的二进制也有原码&#xff0c;反码&#xff0c;补码之分&#xff09; 例 ↑的十进制的ASCII值为24 转换成二进制为00011000…

androidkiller的两种异常情况

第一种反编译时异常&#xff1a; Exception in thread “main” org.jf.dexlib2.dexbacked.DexBackedDexFile$NotADexFile: Not a valid dex magic value: cf 77 4c c7 9b 21 01 修改方法&#xff1a; 编辑 AndroidKiller 的 bin/apktool 目录下有一个 apktool.bat 文件 修改成…

04 SpringMVC响应数据之页面跳转控制+返回JSON数据+返回静态资源

1. handler方法分析 /*** TODO: 一个controller的方法是控制层的一个处理器,我们称为handler* TODO: handler需要使用RequestMapping/GetMapping系列,声明路径,在HandlerMapping中注册,供DS查找!* TODO: handler作用总结:* 1.接收请求参数(param,json,pathVariable,共享…

从uptime看linux平均负载

从前遇到系统卡顿只会top。。top看不出来怎么搞呢&#xff1f; Linux系统提供了丰富的命令行工具&#xff0c;以帮助用户和系统管理员监控和分析系统性能。在这些工具中&#xff0c;uptime、mpstat和pidstat是非常有用的命令&#xff0c;它们可以帮助你理解系统的平均负载以及资…

JavaEE学习笔记 2024-1-12 --Tomcat服务器、Servlet

JavaEE 个人整理非商业用途&#xff0c;欢迎探讨与指正&#xff01;&#xff01; JavaEE是企业级开发 是综合性非常强的阶段  包含的知识点:JavaSE,MySQL,JDBC,WEB(HTML,CSS,JS,前端框架),Servlet,JSP,XML,AJAX等技术 目录 JavaEE1.服务器2.Tomcat服务器2.1Tomcat的使用2.2Tom…

Visual Studio 与 SQL Server 常见报错解决方案(工作向)

前言 这篇文章从今天创建开始&#xff0c;会一直更新下去&#xff0c;以后遇到常见但是比较容易解决的报错会在本文进行更新&#xff0c;有需要的朋友可以收藏再看 目录 Visual Studio lc.exe已退出&#xff0c;代码为-1无法导入以下密钥文件xxx.pfx&#xff0c;该密钥文件…

go实现判断20000数据范围内哪些是素数(只能被1和它本身整除的数),采用多协程和管道实现

实现一个并发程序&#xff0c;用于寻找 20000 以内的所有素数。使用了 Goroutines 和 Channels 来分发和处理任务&#xff0c;并通过 WaitGroup&#xff08;实现为 exitChan&#xff09;来同步 Goroutines 的退出。 一.GO代码 package mainimport ("fmt""time…

【OJ】牛客链表刷题

题目 1. 链表分割1.1 题目分析1.2 代码 2. 链表的回文结构2.1 题目分析2.2 代码 这里两道与链表有关的题目均来自牛客。 1. 链表分割 1.1 题目分析 因为这里代码不能选择用c语言写&#xff0c;所以选择用c,因为c兼容c。 题目要求分割链表&#xff0c;我们可以直接弄成两个带哨…

Spring 中 HttpServletRequest 作为成员变量是安全的吗?

在使用spring框架开发的时候&#xff0c;经常会在controller类中看到 HttpServletRequest 对象参数&#xff0c;一般我们都是直接使用&#xff0c;但是它是何时、怎么注入到 spring 容器的呢 &#xff1f;另外以成员变量注入的 request 是线程安全的吗 ? Controller public c…