vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示
1、經(jīng)過二次處理后數(shù)據(jù)的使用
核心思想就是對(duì)從后臺(tái)搜索獲取到的數(shù)據(jù)進(jìn)行二次加工處理,來達(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 // 核心處理方法開始-----------------------------------------------》 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)文章
解決Vue.js應(yīng)用回退或刷新界面時(shí)提示用戶保存修改問題
這篇文章主要介紹了Vue.js應(yīng)用回退或刷新界面時(shí)提示用戶保存修改問題,本文通過兩種手段防止運(yùn)營編輯時(shí)丟失數(shù)據(jù),具體內(nèi)容詳情,感興趣的朋友跟隨小編一起看看吧2019-11-11Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?
前幾天在vue運(yùn)行項(xiàng)目過程中報(bào)錯(cuò)了,所以下面這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?function的解決方法,需要的朋友可以參考下2022-07-07vue與django(drf)實(shí)現(xiàn)文件上傳下載功能全過程
最近簡(jiǎn)單的學(xué)習(xí)了django和drf上傳文件(主要是圖片),做一個(gè)記錄,下面這篇文章主要給大家介紹了關(guān)于vue與django(drf)實(shí)現(xiàn)文件上傳下載功能的相關(guān)資料,需要的朋友可以參考下2023-02-02Vue實(shí)現(xiàn)當(dāng)前頁面刷新的4種方法舉例
我們?cè)陂_發(fā)vue的頁面的時(shí)候,有時(shí)候會(huì)遇到需要刷新當(dāng)前頁面功能,但是vue框架自帶的router是不支持刷新當(dāng)前頁面功能,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)當(dāng)前頁面刷新的4種方法,需要的朋友可以參考下2023-04-04vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02vue項(xiàng)目中按需引入element-ui的正確實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目中按需引入element-ui的正確實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01