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= ...
随机推荐
- docker学习笔记(4)——Dockerfile
参考资料: 1.官网教程:https://docs.docker.com/engine/reference/builder/ (官网教程,稍后我做一下总结和翻译输出到本文) 2.官网练习推荐:http ...
- 积分图(二) - Block - Match(统计)滤波器
原文地址(英文) 积分图 是 [Crow(1984 年)] 提出的用于提高多尺度透视投影中纹理的渲染速度的一种技术. 积分图最流行的应用是 快速归一化互相关 (fast normalized cros ...
- SoapUI软件-测试Web Service接口
一.新建项目 New SOAP Project Project Name填入项目名称:Initial WSDL中填入接口地址,或后缀为.wsdl的文件:OK: 添加后可在左侧看到接口详情: 二.测试接 ...
- springboot----二、Hello,SpringBoot!
二.Hello,SpringBoot! 2.1.环境搭建 java version 1.8 maven springboot 最新版 开发工具:idea 2.2.创建基础项目说明 Spring官方提供 ...
- source tree的使用
参看博客: https://blog.csdn.net/syq8023/article/details/89844030 http://jingyan.baidu.com/album/59703552 ...
- 微信小程序实现简单的2048
这两天心血来潮,用微信小程序写了一个简单的2048,欢迎各位老铁围观,提出宝贵意见.这里我从0到1赘述一下个人实现流程: 首先去微信公平台(https://mp.weixin.qq.com/)注册一个 ...
- Python列表生成
# For More :http://www.codebelief.com/article/2017/02/python-advanced-programming-list-comprehension ...
- k8s集群Job负载 支持多个 Pod 可靠的并发执行,如何权衡利弊选择适合的并行计算模式?
k8s的Job负载 支持多个 Pod 可靠的并发执行,如何权衡利弊选择适合的并行计算模式? 简单聊聊你对工作负载Job的理解? Job 支持多个 Pod 可靠的并发执行,如何权衡利弊选择适合的并行计算 ...
- freeswitch tts_commandline模块介绍
概述 freeswitch是开源.免费的VOIP软交换平台,自带了很多功能各异的模块. mod_tts_commandline模块,本身没有TTS能力,而是通过调用TTS引擎的命令生成语音文件,tts ...
- Android系统编程入门系列之硬件交互——通信硬件电信SIM卡
现在的SIM卡通常具备基站定位.语音通话.短信消息.网络流量这四大功能,而在移动端是无法对SIM卡使用基站定位功能的,所以这里只介绍移动端如何使用SIM卡实现语音通话.短信消息.数据流量三个功能. 语 ...