vue 搜尋高亮關鍵字

2021-10-11 18:30:34 字數 692 閱讀 7350

在一些查詢中,我們希望我們查詢的關鍵字,可以在查詢內容中高亮出來

this.arr = response.data

this.caselist =

this.arr.foreach(item => )

this.caselist.map(item => )

brightkeyword(val) `)

} else

}

arr是我們從後台獲取的資料,我們對arr這個資料進行遍歷,將arr資料中的單個資料乙個乙個取出來,插入我們專案中的caselist中,map方法是返回乙個新的陣列,在這裡的意思是,對caselist陣列中context資料進行高亮後,重新生成乙個caselist陣列

高亮的方法中fullselect是我們在input框中輸入的東西,font標籤中的顏色根據自己專案的需要可以更換,其他的照搬就可以啦。這個地方只高亮了內容,當然需要高亮標題或者別的,再map中再加入就可以啦。

這種做法避免了乙個弊端是:假如我的關鍵字在查詢過程中沒有結果,也可以顯示出來,只不過沒有高亮效果而已。

但是也存在了乙個問題indexof只會返回第一次與關鍵字的地方,也就是說假如內容中與關鍵字匹配的可能有好多處,但是只能高亮第一處

這個問題目前也在尋找方法,找到了再來補充呀~

我自己寫的是改進過後的,有需要的可以參考

vue搜尋關鍵字使文字高亮

思路 通過正則regexp進行全域性匹配,將符合條件的元素通過replace替換成為html 片段 封裝成自定義指令在main.js裡引入增加可復用性 import vue from vue function hightlight el,binding else el.innerhtml str v...

關鍵字的高亮搜尋

今天在開發中遇到乙個需求,是要求我們把我們搜尋到的那個關鍵字匹配到的字型改變顏色 平常我們不用框架,在傳值的時候用父子相傳這種方式的時候我們可以用以下 hhh text 另一種是我們路由跳轉時進行的傳參,比如 if data 符合資訊時跳轉 接收時 this.route.query.id 後台管理系...

Vue 搜尋功能及搜尋結果關鍵字高亮

先看效果圖 首先實現搜尋功能 景點搜尋 通過computed計算屬性監聽搜尋內容的變化 computed return arrbyzm 返回新的陣列 以上實現搜尋功能 下邊實現搜尋關鍵字高亮顯示 使用v html繫結方法名並傳遞兩個引數,第乙個引數是 景點名稱 第二個引數是 搜尋框內輸入的搜尋內容 ...