Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
更新時間:2023年10月11日 11:00:23 作者:Vue安夏
這篇文章主要介紹了Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這里需求是將keyword的文字內(nèi)容更改顏色,突顯出來
brightKeyword(val) { let keyword = this.$route.params.keyWord?this.$route.params.keyWord:''; keyword = keyword.trim(); if (keyword && keyword.length > 0) { if (keyword == val) { return '<span style="color: #007cbb;">' + val + "</span>"; } keyword = keyword.replaceAll(" ", "|"); let reg = new RegExp(keyword, "ig"); return val.replace(reg, (match) => { return '<span style="color: #007cbb;">' + match + "</span>"; }); } },
vue中搜索出來的關(guān)鍵字標(biāo)紅
<view class="bigbox" v-for="(item,index) in list" :key="index" @click="checkd(item)"> <view :class="currents==item.jobId ?'boxsd':'boxs'" v-if="item.contain == true"> <span>{{item.start}}</span> <span class="intro">{{item.middle}}</span> <span>{{item.end}}</span> </view> <view :class="currents==item.jobId ?'boxsd':'boxs'" v-else> {{item.jobName}} </view> </view>
列表遍歷
this.list.map((item, index) => { this.signKeyword(item.jobName, index) })
標(biāo)紅的方法
// 搜索的值標(biāo)紅 signKeyword(val, index) { let keyword = this.queryParam.jobName //搜索的值 if (val.indexOf(keyword) !== -1) { // 包含字符前面的下標(biāo) let pre = val.indexOf(keyword) // 包含字符的長度 let end = keyword.length this.list[index].contain = true // 截取之前的字符 this.list[index].start = val.slice(0, pre) // 中間包含 this.list[index].middle = keyword // 截取之后的字符(包含字符前面的下標(biāo)+包含字符的長度 = 包含字符之后的下標(biāo)) this.list[index].end = val.substr(pre + end) } else { this.list[index].contain = false } },
標(biāo)紅css
.intro { color: red; }
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
electron+vue實現(xiàn)div contenteditable截圖功能
這篇文章主要介紹了electron+vue實現(xiàn)div contenteditable截圖功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實現(xiàn)token認(rèn)證機制
本文主要介紹了Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實現(xiàn)token認(rèn)證機制,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01Vue中v-form標(biāo)簽里的:rules作用及定義方法
文章介紹了在Vue項目中使用ElementUI或ElementPlus組件庫時,如何通過`el-form`標(biāo)簽的`:rules`屬性進(jìn)行表單驗證,`:rules`屬性用于定義表單項的驗證規(guī)則,包括必填項、格式校驗、長度限制等,文章還展示了如何定義基本驗證規(guī)則和自定義驗證函數(shù),感興趣的朋友一起看看吧2025-03-03在Vue中使用Viser說明(基于AntV-G2可視化引擎)
這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10Vue3中Vuex狀態(tài)管理學(xué)習(xí)實戰(zhàn)示例詳解
這篇文章主要為大家介紹了Vue3中Vuex狀態(tài)管理學(xué)習(xí)實戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06vue實現(xiàn)在線學(xué)生錄入系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)在線學(xué)生錄入系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-05-05