当前位置: 首页 > 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

相关文章:

  • 1.7 JS性能优化
  • WordPress HTTPS 配置问题解决方案
  • UDP协议和TCP协议之间有什么具体区别?
  • uniCloud云对象调用第三方接口,根据IP获取用户归属地的免费API接口,亲测可用
  • Golang | Leetcode Golang题解之第559题N叉树的最大深度
  • Spark:不能创建Managed表,External表已存在...
  • 【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 任意文件上传漏洞复现