vue項目實現(xiàn)搜索內(nèi)容變紅色顯示
更新時間：2022年12月21日 10:13:09 作者：coderSlow
這篇文章主要為大家介紹了vue項目實現(xiàn)搜索內(nèi)容變紅色顯示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
1、經(jīng)過二次處理后數(shù)據(jù)的使用
核心思想就是對從后臺搜索獲取到的數(shù)據(jù)進行二次加工處理，來達到想要的效果
<ul class="content_box">
<li class="content_item" v-for="(item, index) in contentListData" :key="index" @click="searchLinkDetails(item)">
<div class="title" v-html="item.title"></div>
<div class="content" v-html="item.originalContent"></div>
<div class="time">{{item.publishTime}}</div>
</li>
</ul>
2、data中要定義的數(shù)據(jù)參數(shù)
searchValue: '', // 搜索文本 contentListData: []
3、獲取列表數(shù)據(jù)并二次處理數(shù)據(jù)
// 獲取列表的方法
async getDataList() {
let params = {
websiteId: 4,
content: this.searchValue,
current: this.currentPage,
size: 10,
timeRange: this.searchTimeCheck,
searchRange: this.searchScopeCheck
}
let res = await searchList(params)
this.contentListData = res.data.records
this.total = res.data.total
// 核心處理方法開始-----------------------------------------------》
if (this.searchValue && this.searchValue.length > 0) {
const reg = `/${this.searchValue}/g`;
this.contentListData.forEach((item) => {
item.title = item.title.replace(
eval(reg),
"<span style='color: red;'>" + this.searchValue + "</span>"
);
if (item.originalContent) {
item.originalContent = item.originalContent.replace(
eval(reg),
"<span style='color: red;'>" + this.searchValue + "</span>"
);
}
});
}
// 核心處理方法結(jié)束------------------------------------------------》
},
總結(jié)核心代碼和具體效果如下
1、數(shù)據(jù)二次處理的核心方法
if (this.searchValue && this.searchValue.length > 0) {
const reg = `/${this.searchValue}/g`;
this.contentListData.forEach((item) => {
item.title = item.title.replace(
eval(reg),
"<span style='color: red;'>" + this.searchValue + "</span>"
);
if (item.originalContent) {
item.originalContent = item.originalContent.replace(
eval(reg),
"<span style='color: red;'>" + this.searchValue + "</span>"
);
}
});
}
2、實現(xiàn)效果
以上就是vue項目實現(xiàn)搜索內(nèi)容變紅色顯示的詳細內(nèi)容，更多關(guān)于vue搜索內(nèi)容紅色顯示的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了如何解決el-checkbox選中狀態(tài)更改問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
這篇文章主要介紹了vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作,結(jié)合實例形式較為詳細的分析了vue.js前后端數(shù)據(jù)交互相關(guān)的表單結(jié)構(gòu)、約束規(guī)則、數(shù)據(jù)提交等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-04-04
vue的主要思想是組件化開發(fā),路由用來配置組件對應(yīng)展示路徑,本文給大家介紹vue中路由router配置步驟,創(chuàng)建路由文件——使用路由——配置路由出口,使路由配置內(nèi)容展示在頁面上,感興趣的朋友跟隨小編一起看看吧2023-12-12
本文介紹Vue組件間通信方式，Vue組件間通信一直是個重要的話題，雖然官方推出的Vuex狀態(tài)管理方案可以很好的解決組件之間的通信問題，但是在組件庫內(nèi)部使用Vuex往往會比較重，本文將系統(tǒng)的羅列出幾種不使用Vuex，比較實用的組件間的通信方式，希望能幫助到大家2022-09-09
Vue中動態(tài)權(quán)限到按鈕的完整實現(xiàn)方案詳解
這篇文章主要為大家詳細介紹了Vue如何在現(xiàn)有方案的基礎(chǔ)上加入對路由的增、刪、改、查權(quán)限控制,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
這篇文章主要介紹了對 Vue-Router 進行單元測試的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue使用動態(tài)組件實現(xiàn)TAB切換效果完整實例
在實際項目開發(fā)中,我們經(jīng)常會遇到選項卡切換,對于一個前端工程師來說,組件化/模塊化開發(fā)是一種必備的行為規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue使用動態(tài)組件實現(xiàn)TAB切換效果的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue選擇下拉框動態(tài)變化表單方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
element plus中el-upload實現(xiàn)上傳多張圖片的示例代碼
最近寫項目的時候需要一次上傳多張圖片,本文主要介紹了element plus中el-upload實現(xiàn)上傳多張圖片的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue中常見的幾種傳參方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05