vue2實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼
更新時(shí)間：2018年08月29日 11:14:25 作者：全棧弄潮兒
這篇文章主要介紹了vue2實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼,需要的朋友可以參考下
具體代碼如下所示：
// 篩選變色
brightenKeyword(val, keyword) {
val = val + '';
if (val.indexOf(keyword) !== -1 && keyword !== '') {
return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
} else {
return val
}
}
// 或者用正則表達(dá)式
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="維護(hù)內(nèi)容">
<template slot-scope="scope">
<span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span>
</template>
</el-table-column>
開源項(xiàng)目地址： github.com/alex-0407/v…
效果演示
總結(jié)
以上所述是小編給大家介紹的vue2實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)備忘錄功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
如何使用el-table實(shí)現(xiàn)純前端導(dǎo)出(適用于el-table任意表格)
我們?nèi)粘Ｗ鲰?xiàng)目,特別是后臺管理系統(tǒng),常常需要導(dǎo)出excel文件,這篇文章主要給大家介紹了關(guān)于如何使用el-table實(shí)現(xiàn)純前端導(dǎo)出的相關(guān)資料,本文適用于el-table任意表格,需要的朋友可以參考下2024-03-03
vue+element-ui?校驗(yàn)開始時(shí)間與結(jié)束時(shí)間的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+element-ui?校驗(yàn)開始時(shí)間與結(jié)束時(shí)間的代碼實(shí)現(xiàn),最主要的需求是開始時(shí)間不能早于當(dāng)前時(shí)間,感興趣的朋友跟隨小編一起看看吧2024-07-07
媒體查詢@media常見的不生效原因包括格式書寫錯(cuò)誤,例如and后必須有空格；樣式?jīng)_突,后面的CSS會覆蓋前面的；CSS本身存在問題,比如塊元素浮動導(dǎo)致父級元素?zé)o高度而背景顏色不顯示；漏掉了meta屬性中的viewport屬性,正確書寫和排列CSS代碼2024-10-10
查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法
這篇文章主要大家介紹了查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法,文章通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
VueCli4項(xiàng)目配置反向代理proxy的方法步驟
這篇文章主要介紹了VueCli4項(xiàng)目配置反向代理proxy的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue?elementui動態(tài)添加el-input實(shí)例代碼
最近遇到一個(gè)新的需求,需要動態(tài)添加el-input,這篇文章主要給大家介紹了關(guān)于vue?elementui動態(tài)添加el-input的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
本文主要介紹了ElementUI表格中添加表頭圖標(biāo)懸浮提示，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue-element-admin如何轉(zhuǎn)換成中文
這篇文章主要介紹了vue-element-admin如何轉(zhuǎn)換成中文問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
最近需要做一個(gè)el-table的表格,表頭需要顯示提示信息,本文主要介紹了ElementUI中el-table表格組件如何自定義表頭,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09