当前位置: 首页 > article >正文

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;
}

http://www.kler.cn/a/393393.html

相关文章:

  • 字节跳动Java开发面试题及参考答案(数据结构算法-手撕面试题)
  • feign验签不通过,但是postman没问题
  • 【Docker命令】如何使用`docker exec`在容器内执行命令
  • Linux 下处理 ^M 字符的最佳实践
  • 19_HTML5 Web Workers --[HTML5 API 学习之旅]
  • React 第十九节 useLayoutEffect 用途使用技巧注意事项详解
  • 【Git】如何在 Git 项目中引用另一个 Git 项目:子模块与子树合并
  • 学习threejs,导入STL格式的模型
  • 【Linux】ELF可执行程序和动态库加载
  • CSS高级技巧_精灵图_字体图标_CSS三角_vertical-align(图像和文字居中在同一行)_溢出文字省略号显示
  • 随机森林(Random Forest)算法Python代码实现
  • 数据量大Excel卡顿严重?选对报表工具提高10倍效率
  • 同三维T85HU HDMI+USB摄像机多路多机位手机直播采集卡
  • 浅析pytorch中的常见函数和方法
  • 128.WEB渗透测试-信息收集-ARL(19)
  • DDE(深度桌面环境) Qt 6.8 适配说明
  • 嵌入式开发套件(golang版本)
  • 昇思大模型平台打卡体验活动:项目6基于MindSpore通过GPT实现情感分类
  • 力扣662:二叉树的最大宽度
  • Java面向对象编程进阶之包装类
  • Python---re模块(正则表达式)
  • 快递鸟快递查询API接口参数代码
  • 字符设备 - The most important !
  • JavaScript 中实例化生成对象的相关探讨
  • JVM 中的完整 GC 流程
  • 电信网关配置管理后台 upload_channels.php 任意文件上传漏洞复现