vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示
1、經(jīng)過(guò)二次處理后數(shù)據(jù)的使用
核心思想就是對(duì)從后臺(tái)搜索獲取到的數(shù)據(jù)進(jìn)行二次加工處理,來(lái)達(dá)到想要的效果
<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
// 核心處理方法開(kāi)始-----------------------------------------------》
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、實(shí)現(xiàn)效果

以上就是vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示的詳細(xì)內(nèi)容,更多關(guān)于vue搜索內(nèi)容紅色顯示的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
如何解決el-checkbox選中狀態(tài)更改問(wèn)題
這篇文章主要介紹了如何解決el-checkbox選中狀態(tài)更改問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
這篇文章主要介紹了vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js前后端數(shù)據(jù)交互相關(guān)的表單結(jié)構(gòu)、約束規(guī)則、數(shù)據(jù)提交等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-04-04
Vue中動(dòng)態(tài)權(quán)限到按鈕的完整實(shí)現(xiàn)方案詳解
這篇文章主要為大家詳細(xì)介紹了Vue如何在現(xiàn)有方案的基礎(chǔ)上加入對(duì)路由的增、刪、改、查權(quán)限控制,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
對(duì) Vue-Router 進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了對(duì) Vue-Router 進(jìn)行單元測(cè)試的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果完整實(shí)例
在實(shí)際項(xiàng)目開(kāi)發(fā)中,我們經(jīng)常會(huì)遇到選項(xiàng)卡切換,對(duì)于一個(gè)前端工程師來(lái)說(shuō),組件化/模塊化開(kāi)發(fā)是一種必備的行為規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的相關(guān)資料,需要的朋友可以參考下2023-05-05
element plus中el-upload實(shí)現(xiàn)上傳多張圖片的示例代碼
最近寫(xiě)項(xiàng)目的時(shí)候需要一次上傳多張圖片,本文主要介紹了element plus中el-upload實(shí)現(xiàn)上傳多張圖片的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01

