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