vue文本高亮处理

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

html 复制代码
  <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>
css 复制代码
//高亮的
.color-match{
    color: #FFFFFF;
}
//非高亮
.color-match2{
    color: #FFFFFF;
    opacity: 0.5;
}
相关推荐
dme.3 分钟前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->6 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~7 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo8 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末27 分钟前
React——基础
前端·react.js·前端框架
aklry38 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端