vue2实现搜索结果中的搜索关键字高亮的代码


Posted in Javascript onAugust 29, 2018

具体代码如下所示:

// 筛选变色
brightenKeyword(val, keyword) {
  val = val + '';
  if (val.indexOf(keyword) !== -1 && keyword !== '') {
    return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
  } else {
   return val
  }
}
// 或者用正则表达式
brightenKeyword(val, keyword) {
  const Reg = new RegExp(keyword, 'i');
  if (val) {
    return val.replace(Reg, `<span style="color: #409EFF;">${keyword}</span>`);
  }
}
// 使用方法
<el-table-column label="维护内容">
  <template slot-scope="scope">
   <span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span>
  </template>
</el-table-column>

开源项目地址: github.com/alex-0407/v…

效果演示

vue2实现搜索结果中的搜索关键字高亮的代码

总结

以上所述是小编给大家介绍的vue2实现搜索结果中的搜索关键字高亮的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 #Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 #Javascript
Vuex 使用及简单实例(计数器)
Aug 29 #Javascript
浅谈Vue.use的使用
Aug 29 #Javascript
微信小程序支付前端源码
Aug 29 #Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 #Javascript
javascript中UMD规范的代码推演
Aug 29 #Javascript
You might like
PHP基础知识介绍
2013/09/17 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
载入进度条 效果
2006/07/08 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue3.0 上手体验
2020/09/21 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python类super()及私有属性原理解析
2020/06/15 Python
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
宿舍打麻将检讨书
2014/01/24 职场文书
经典英文广告词
2014/03/18 职场文书
安全生产月标语
2014/10/07 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
环境卫生标语
2015/08/03 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL
Java死锁的排查
2022/05/11 Java/Android
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL