vue2实现搜索结果中的搜索关键字高亮
// 筛选变色
brightenKeyword(val, keyword) {
val = val + '';
if (val.indexOf(keyword) !== -1 && keyword !== '') {
return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
} else {
return val
}
}
// 使用方法
<el-table-column label="维护内容">
<template slot-scope="scope">
<span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span>
</template>
</el-table-column>
开源项目地址: https://github.com/alex-0407/...
效果演示
更多angular1/2/4/5、ionic1/2/3/4、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请扫一扫下面的二维码关注微信公众号——全栈弄潮儿。
福利专区:扫码关注,免费领取淘宝天猫内部优惠券
vue2实现搜索结果中的搜索关键字高亮的更多相关文章
- 用Java实现自动打开浏览器在搜索框中进行搜索
主要使用了Java的剪切板操作和Robot类 上代码: package pers.jeaven.AutoRobot.main; import java.awt.Desktop; import java ...
- angular2 pipe实现搜索结果中的搜索关键字高亮
效果图如下 1.声明一个pipe import {Pipe, Injectable, PipeTransform} from '@angular/core';import { DomSanitizer ...
- 在 Angular 中实现搜索关键字高亮
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...
- 在stream流和byte[]中查找(搜索)指定字符串
在 stream流 和 byte[] 中查找(搜索)指定字符串 这里注重看的是两个 Search 的扩展方法,一个是 stream 类型的扩展,另一个是 byte[] 类型的扩展, 如果大家有更好的“ ...
- linux 中的搜索命令
which 查看可执行文件的位置. whereis 查看文件位置. locate 配合数据库查看文件位置. find 实际搜索硬盘查询文件名称. grep 查找文件内容 一般不常用find命令,因为f ...
- MWeb for Mac使用教程-如何在文档库中快速搜索
使用MWeb for Mac专业的 Markdown 编辑写作软件,可以让你随时记录自己的想法,灵感,创意,为您的工作节省宝贵的时间.本篇文章带来的是MWeb for Mac如何在文档库中快速搜索使用 ...
- 详细解读Android中的搜索框(四)—— Searchable配置文件
<?xml version="1.0" encoding="utf-8"?> <searchable xmlns:android=" ...
- 详细解读Android中的搜索框(二)—— Search Dialog
Search Dialog是提供搜索的控件之一,还有一个是上次小例子给出的searchView,关于SearchView的东西后面会说到.本次先从Search Dialog说起,让大家慢慢理解andr ...
- 百度搜索URL中的参数都是什么
最近,点石排名更新了一个新功能——站内搜索.其实理解起来也很简单,就是通过URL限定搜索结果为某个网站,从而参与点击(例如:https://www.baidu.com/s?wd=SEO&si= ...
随机推荐
- k8s全方位监控 -prometheus实现短信告警接口编写(python)
1.prometheus短信告警接口实现(python)源码如下: import subprocess from flask import Flask from flask import reques ...
- JZ-048-不用加减乘除做加法
不用加减乘除做加法 题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 题目链接: 不用加减乘除做加法 代码 /** * 标题:不用加减乘除做加法 * 题目描述 ...
- LeetCode-093-复原 IP 地址
复原 IP 地址 题目描述:给定一个只包含数字的字符串,用以表示一个 IP 地址,返回所有可能从 s 获得的 有效 IP 地址 .你可以按任何顺序返回答案. 有效 IP 地址 正好由四个整数(每个整数 ...
- 如何使用 VS Code 远程连接矩池云主机
Visual Studio Code(以下简称 VS Code)是一个由微软开发的代码编辑器.VS Code 支持代码补全.代码片段.代码重构.Git 版本控制等功能. VS Code 现已支持连接远 ...
- source insight新建工程
1.打开Source Insight.如果已经打开过项目,则选择Project->Close Project.然后点击Project->New Project: 2.在弹出界面填入项目名 ...
- C# WinForm 解决子窗体放大后,子窗体图标放大的问题
解决子窗体放大后,子窗体的图标占用主窗体的菜单栏的问题. C#子窗体最大化时, 那个图标跑到主窗体的前面去了, 造成界面不统一也不美观. 所以需要进行处理, 只要有主窗体的菜单ItemAdded事件中 ...
- 一个简单的模拟实例说明Task及其调度问题
Task对于.NET的重要性毋庸置疑.通过最近的一些面试经历,发现很多人对与Task及其调度机制,以及线程和线程池之间的关系并没有清晰的认识.本文采用最简单的方式模拟了Task的实现,旨在说明Task ...
- CF1486X Codeforces Round #703
C2 Guessing the Greatest (二分+构造) 题目大意:交互题,每次可以询问一个子区间次大值的位置,最多询问20次,问全局最大值的位置.n=1e5 40次的情况大力二分,20次需要 ...
- XML技术的作用?
XML技术用于数据存储.信息配置.数据交换三方面. 可以将数据存储在XML中,通过节点.元素内容.属性标示数据内容及关系. 可以使用XML很方便的做信息配置,软件的各种配置参数和对象关系都存贮在XML ...
- Spring Boot 的配置文件有哪几种格式?它们有什么区别?
.properties 和 .yml,它们的区别主要是书写格式不同. 1).properties app.user.name = javastack 2).yml app: ...