vue文本高亮处理

在vue的v-for循环中处理搜索关键字高亮问题,通过截取文字判断,分成三段拼接起来

  <div class="check-list" v-if="shopList.length >0">

                                    <a-checkbox @change="onChangeShop($event,item)"  :checked="checkedList.includes(item.value)" v-for="(item,index) in shopList" :key="index" >

                                        <span class="color-match2"  > {{ item.shopName.substr(0, item.shopName .indexOf(searchValue)) }}</span>
                                        <span class="color-match" >{{ searchValue }}</span>
                                        <span class="color-match2" >{{ item.shopName .substr(item.shopName .indexOf(searchValue)+ searchValue.length)}} </span>
                                    </a-checkbox>

 </div>
//高亮的
.color-match{
    color: #FFFFFF;
}
//非高亮
.color-match2{
    color: #FFFFFF;
    opacity: 0.5;
}

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

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

相关文章

<项目代码>YOLOv8 手机识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

算法定制LiteAIServer摄像机实时接入分析平台烟火识别检测算法

在公共安全领域&#xff0c;火灾的及时发现与处理是保障人民群众生命财产安全的重要手段。传统的烟火检测手段受限于人工巡查的局限&#xff0c;难以做到全天候、无遗漏的监控。然而&#xff0c;随着人工智能技术的飞速发展&#xff0c;LiteAIServer摄像机实时接入分析平台烟火…

JMeter与大模型融合应用之JMeter日志分析服务化实战应用

JMeter与大模型融合应用之JMeter日志分析服务化 引言 在当今的互联网时代,网站和应用程序的性能直接影响到用户的体验和业务的成功。为了保证系统的稳定性和高效性,性能测试成为了软件开发过程中的一个重要环节。在这其中,Apache JMeter作为一款开源的性能测试工具,凭借其…

【Pikachu】任意文件上传实战

将过去和羁绊全部丢弃&#xff0c;不要吝惜那为了梦想流下的泪水。 1.不安全的文件上传漏洞概述 不安全的文件上传漏洞概述 文件上传功能在web应用系统很常见&#xff0c;比如很多网站注册的时候需要上传头像、上传附件等等。当用户点击上传按钮后&#xff0c;后台会对上传的…

STM32 ADC --- 单通道采样

STM32 ADC — 单通道采样 文章目录 STM32 ADC --- 单通道采样cubeMX配置代码修改&#xff1a;应用 使用cubeMX生成HAL工程 需求&#xff1a;有多个通道需要进行ADC采样&#xff0c;实现每次采样只采样一个通道&#xff0c;且可以随时采样不同通道的功能。 cubeMX配置 这里我们…

influxDB 时序数据库安装 flux语法 restful接口 nodjsAPI

安装 Install InfluxDB | InfluxDB OSS v2 Documentation Debian和Ubuntu用户可以用apt-get包管理来安装最新版本的InfluxDB。 对于Ubuntu用户&#xff0c;可以用下面的命令添加InfluxDB的仓库&#xff0c;添加之后即可apt-get 安装influxdb2 wget -q https://repos.influx…

【轻量化】YOLOv10 更换骨干网络之 MobileNetv4 | 模块化加法!非 timm 包!

之前咱们在这个文章中讲了timm包的加法,不少同学反馈要模块化的加法,那么这篇就讲解下模块化的加法,值得注意的是,这样改加载不了mobilebnetv4官方开源的权重了~ 论文地址:https://arxiv.org/pdf/2404.10518 代码地址:https://github.com/tensorflow/models/blob/master…

电气自动控制电路图图例

单相照明双路互备自投供电电路 双路三相电源自投电路 茶炉水加热自动控制电路 简单的温度控制器电路 简易晶闸管温度自动控制电路 用双向晶闸管控制温度电路 XCT-101动圈式温度调节仪控温电路 电接点压力式温度表控温电路 TDA-8601型温度指示调节仪控温电路 XMT-DA数字…

D3 可以加载的数据格式有哪些?(12种)

D3.js 支持多种数据格式&#xff0c;这些格式涵盖了从简单的表格数据到复杂的地理数据。以下是一些常见的数据格式及其加载方法&#xff1a; D3.js 数据加载方法 d3.blob(input, init) 用途: 加载二进制数据&#xff0c;返回一个 Blob 对象。参数: input: 数据源 URL。init: …

Pinpoint(APM)进阶--Pinot指标采集(System Metric/Inspector)

接上文 Pinpoint使用Pinot进行指标数据存储&#xff0c;Pinot流摄入需要Kafka 本文详解Kafka和Pinot的安装部署&#xff0c;以及Pinpoint的指标采集 Pinot 简介 Apache Pinot是一个实时分布式OLAP数据存储&#xff0c;专为低延迟、高吞吐量分析而构建&#xff0c;非常适合面…

mmsegmentation: 安装 并使用自定义数据集进行训练 ·2

我用的是CHASE_DB1.py 数据集下载链接 https://staffnet.kingston.ac.uk/~ku15565/CHASE_DB1/assets/CHASEDB1.zip 这个用来转换mmseg所需要的格式 python tools/dataset_converters/chase_db1.py /path/to/CHASEDB1.zip其他数据集请看链接&#xff1a;https://mmsegmenta…

通义千问API调用测试 (colab-python,vue)

文章目录 代码&#xff08;来自官网&#xff09;colab中用python测试Qwen2.5在官网上查看并确定过期时间这里看到我的免费额度到25年5月在同一个页面&#xff0c;点击API示例 前端调用直接在前端调用的优缺点以vue为例&#xff08;代码是基于官网node.js的代码转换而来&#xf…

【c++笔试强训】(第九篇)

目录 链表相加&#xff08;⼆&#xff09;&#xff08;链表⾼精度加法&#xff09; 题目解析 讲解算法原理 编写代码 ⼤数乘法&#xff08;⾼精度乘法&#xff09; 题目解析 讲解算法原理 辨析代码 链表相加&#xff08;⼆&#xff09;&#xff08;链表⾼精度加法&#…

C#高级:使用Invoke关键字通过 Type 类型调用指定的方法

demo如下&#xff1a; using System.Reflection; using System;public class Program {public class Calculator{public int Add(int a, int b){return a b;}}public class Student{public string Name { get; set; }}public class Example{// 泛型方法public string Generi…

B-树特点以及插入、删除数据过程

B树&#xff08;B-Tree&#xff09;是一种自平衡的多路查找树&#xff0c;它广泛应用于数据库索引和文件系统中&#xff0c;尤其适用于外部存储设备&#xff08;如磁盘&#xff09;。B树的设计使得它能够高效地存储大量数据并支持高效的插入、删除和查询操作。以下是B树的主要特…

自定义反序列化过程

需求&#xff1a;student对象中name属性&#xff0c;序列化时将该属性映射为stuname&#xff0c;反序列化时将 Json中的NAME键值对映射到name属性中 AllArgsConstructorNoArgsConstructorGetterSetterstatic class Student {JsonProperty("stuname")private List<…

解读 ConcurrentHashMap 源码:探索高并发场景下的卓越性能

ConcurrentHashMap 了&#xff0c;作为线程安全的 HashMap &#xff0c;它的使用频率也是很高。那么它的存储结构和实现原理是怎么样的呢&#xff1f;HashMap 源码&#xff1a;揭开哈希表背后的秘密 1、ConcurrentHashMap 1.7 1. 存储结构 Java 7 中 ConcurrentHashMap 的存储…

为什么配置TIM11作为系统时基的时候会出现__NVIC_PRIO_BITS

回想起当初学freertos的时候&#xff0c;某个中断优先级以下的任务是不能被freertos管理的&#xff08;好像是全是抢占优先级&#xff0c;0子优先级的设置&#xff09;。当初还不是非常了解。只知道管理不了 HAL_StatusTypeDef HAL_InitTick(uint32_t TickPriority) {RCC_ClkI…

数字IC实践项目(10)—基于System Verilog的DDR4 Model/Tb 及基础Verification IP的设计与验证(付费项目)

数字IC实践项目&#xff08;10&#xff09;—基于System Verilog的DDR4 Model/Tb 及基础Verification IP的设计与验证&#xff08;付费项目&#xff09; 前言项目框图1&#xff09;DDR4 Verification IP2&#xff09;DDR4 JEDEC Model & Tb 项目文件1&#xff09;DDR4 Veri…

python解析网页上的json数据落地到EXCEL

安装必要的库 import requests import pandas as pd import os import sys import io import urllib3 import json测试数据 网页上的数据结构如下 {"success": true,"code": "CIFM_0000","encode": null,"message": &quo…