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 相关文章推荐
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
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 Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
python找出完数的方法
2018/11/12 Python
python opencv实现图像边缘检测
2019/04/29 Python
pandas数据处理之绘图的实现
2020/06/15 Python
Python 如何对文件目录操作
2020/07/10 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
局域网标准
2016/09/10 面试题
行政部工作岗位职责范本
2014/03/05 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
外国人聘用意向书
2014/04/01 职场文书
销售队伍口号
2014/06/11 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
MySQL连接控制插件介绍
2021/09/25 MySQL
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle