当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue2实现搜索结果中的搜索关键字高亮的代码

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

2018年09月21日  | 移动技术网IT编程  | 我要评论

文过饰非造句,脱线angeltxt,仙之侠道千龙优化版

具体代码如下所示：

// 筛选变色
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>

开源项目地址：

效果演示

总结

以上所述是小编给大家介绍的vue2实现搜索结果中的搜索关键字高亮的代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网