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

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

//搜索框部分
<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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

洛谷 P2415 集合求和

原文链接&#xff1a;洛谷 P2415 集合求和 一、题目链接 集合求和 - 洛谷 妥妥的一道数学问题&#xff0c;把数学层面的问题解决了&#xff0c;代码很好写&#xff1b; 题意&#xff1a;给n个元素的集合&#xff0c;求出所有子集的元素的和。 二、题目分析 思考一下&…

2024年【建筑电工(建筑特殊工种)】考试报名及建筑电工(建筑特殊工种)免费试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 建筑电工(建筑特殊工种)考试报名是安全生产模拟考试一点通总题库中生成的一套建筑电工(建筑特殊工种)免费试题&#xff0c;安全生产模拟考试一点通上建筑电工(建筑特殊工种)作业手机同步练习。2024年【建筑电工(建筑特…

189.轮转数组(数组翻转,C解法)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转…

C++--默认参数

一.默认参数&#x1f357; C中允许函数提供默认参数&#xff0c;也就是允许在函数的声明或定义时给⼀个或多个参数指定默认值。在调 ⽤具有默认参数的函数时&#xff0c;如果没有提供实际参数&#xff0c;C将⾃动把默认参数作为相应参数的值。 二.使用规则&#x1f357; 1.如果…

Java中List接口两个实现,ArrayList类和LinkedList类的常用方法(一)

List接口 要了解List接口&#xff0c;就不得不说起Java的集合框架。 &#xff08;该图来自菜鸟教程&#xff09; Collection接口和Map接口 Java 集合框架主要包括两种类型的容器&#xff0c;集合Collection和图Map。 Collection接口代表了单列集合&#xff0c;它包含了一组…

恭喜所有纺织人,你最想要的小程序来了

随着互联网的普及和电子商务的快速发展&#xff0c;越来越多的商家开始涉足线上销售。而小程序商城作为一种轻量级的应用程序&#xff0c;正逐渐成为商家们热衷选择的销售平台。本文将通过实用指南的形式&#xff0c;为商家们详细介绍如何通过乔拓云网后台&#xff0c;自助搭建…

Mybatis面试题(二)

MyBatis 面试题 11、Mybatis是如何将sql执行结果封装为目标对象并返回的&#xff1f;都有哪些映射形式&#xff1f; 第一种是使用标签&#xff0c;逐一定义数据库列名和对象属性名之间的映射关系。 第二种是使用 sql 列的别名功能&#xff0c;将列的别名书写为对象属性名。 …

.NET架构师:全网最全“权限系统”设计剖析

&#x1f3c6;作者&#xff1a;科技、互联网行业优质创作者 &#x1f3c6;专注领域&#xff1a;.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造 &#x1f3c6;欢迎关注我&#xff08;Net数字智慧化基地&#xff09;&#xff0c;里面…

品鉴威士忌:威士忌酿造发酵,糖类到酒精的转变

威士忌&#xff0c;这一源自苏格兰的特别蒸馏酒&#xff0c;以其丰富的味蕾和特别的风味吸引了无数品鉴者。在威士忌的酿造过程中&#xff0c;发酵是从糖类物质转化为酒精的重要环节。本文将带您深入了解威士忌发酵的过程&#xff0c;以及如何捕捉那些难以言喻的美妙味蕾感受。…

Seaborn可视化的各种图及代码演示

一.简介 Seaborn是基于matplotlib的图形可视化python包。它提供了一种高度交互式界面&#xff0c;便于用户能够做出各种有吸引力的统计图表。 Seaborn是在matplotlib的基础上进行了更高级的API封装&#xff0c;从而使得作图更加容易&#xff0c;在大多数情况下使用seaborn能做…

FFmpeg之AVFilter

文章目录 一、概述二、重要结构体2.1、AVFilterGraph2.2、AVFilter2.3、AVFilterContext 三、流程梳理3.1、FFmpeg AVFilter 使用整体流程3.2、过滤器构建流程3.2.1、分配AVFilterGraph3.2.2、创建过滤器源3.2.3、创建接收过滤器3.2.4、生成源和接收过滤器的输入输出3.2.5、通过…

GMT学习记录

我主要根据GMT中文手册一步一步学习的&#xff01;&#xff01;&#xff01;&#xff01;B站视频介绍的是5.0老版本仅仅建立基础理解这个软件。 好的&#xff0c;学了一点发现直接把gmt转为shp&#xff0c;就得到我想的文件 gmt数据转shape格式数据 - 简书 (jianshu.com) 命…

算法刷题——删除排序链表中的重复元素(力扣)

文章目录 题目描述我的解法思路结果分析 官方题解分析 查漏补缺更新日期参考来源 题目描述 传送门 删除排序链表中的重复元素&#xff1a;给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&…

细说JavaScript BOM之HTML5新特性

1、applicationCache对象 什么是Application Cache呢&#xff1f;HTML5引入了应用程序缓存技术&#xff0c;意味着Web应用可进行缓存&#xff0c;并在没有网络的情况下使用&#xff0c;通过创建cache manifest文件&#xff0c;可以轻松的创建离线应用。 Application Cache带来…

数字创意市场:Web3时代创作者的新机遇

随着Web3时代的崭露头角&#xff0c;数字创意市场正迎来全新的变革和机遇。在这个数字化的时代&#xff0c;创作者们将面对更加开放、去中心化的创作和交易环境。本文将深入探讨Web3时代数字创意市场为创作者带来的新机遇&#xff0c;以及这个时代为创意产业带来的变革。 创作者…

2024 Move 开发者大会精彩回顾|共赴 Move 生态的无限未来

2024 年的 Move 开发者大会是 Move 生态的一场大型的线下盛事。Move 的优异特性、Move 的高光发展、Move 的未来潜力……无不引领着开发者、投资人等一众业内人士加入建设可持续的 Move 生态世界。 在去中心化、安全性和可扩展性等 Web3 关键议题不断涌现之时&#xff0c;Move …

YOLOv5全网独家首发:DCNv4更快收敛、更高速度、更高性能,效果秒杀DCNv3、DCNv2等 ,助力检测实现暴力涨点

💡💡💡本文独家改进:DCNv4更快收敛、更高速度、更高性能,完美和YOLOv5结合,助力涨点 DCNv4优势:(1) 去除空间聚合中的softmax归一化,以增强其动态性和表达能力;(2) 优化存储器访问以最小化冗余操作以加速。这些改进显著加快了收敛速度,并大幅提高了处理速度,DCN…

python数字图像处理基础(七)——直方图均衡化、傅里叶变换

目录 直方图均衡化均衡化原理均衡化效果标准直方图均衡化自适应直方图均衡化 傅里叶变换原理低通滤波高通滤波 直方图均衡化 均衡化原理 图像均衡化是一种基本的图像处理技术&#xff0c;通过更新图像直方图的像素强度分布来调整图像的全局对比度。这样做可以使低对比度的区域…

新品上市如何做好内容营销?

当新品上市面向用户销售时&#xff0c;其中的关键环节就是内容营销&#xff0c;只要有一套完整的内容营销策略&#xff0c;那在新品上市时就可以取得不错的成绩&#xff0c;今天媒介盒子就来和大家聊聊&#xff1a;新产品上市如何做好内容营销。 一、 结合不同层次需求 1.用…

Mac系统数据占用太多怎么清理 mac怎么清除下载的软件

在我们使用MacBook电脑的过程中&#xff0c;经常会遇到一个常见的问题&#xff0c;那就是储存空间不足。当我们的硬盘空间被占满的时候&#xff0c;系统的运行速度可能会变得缓慢&#xff0c;并且我们无法保存新的文件或者安装新的应用程序。要解决这个问题&#xff0c;清理缓存…