vue 前端處理監聽關鍵字搜尋

2022-06-16 03:51:07 字數 796 閱讀 4641

根據元件的業務需要,有時候搜尋是把關鍵字返回給後台,後台處理後再把資料返回給前端渲染(多次請求伺服器);有時候是前端把頁面的資料全部獲取下來,前端處理關鍵字的搜尋(影響頁面載入)

我這個文章是介紹第二種情況,主要是要先了解es6的filter()和includes()

filter() 方法建立乙個新的陣列,新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。不會對空陣列進行檢測。不會改變原始陣列。

array.filter(function(currentvalue,index,arr),thisvalue)

可以點選了解

例項:

includes() 方法用來判斷乙個陣列或字串是否包含乙個指定的值,如果是返回 true,否則false

可以點選了解

哈哈哈知道這兩個函式後就很簡單了

1.搜尋欄

2.搜尋出對應的列表(class的命名不要學不要用下劃線)

3,在watch中監聽(this.alloptions是你已經從後台獲取到所有資料儲存起來的)

vue 搜尋高亮關鍵字

在一些查詢中,我們希望我們查詢的關鍵字,可以在查詢內容中高亮出來 this.arr response.data this.caselist this.arr.foreach item this.caselist.map item brightkeyword val else arr是我們從後台獲取的...

關鍵字搜尋

關鍵字搜尋 function sercah waitmsg 已找到對應的 g keys count 處關鍵字!1 相同關鍵字查詢時返回 reading children reading box m p css span keys removeattr style removeattr id g ke...

vue搜尋關鍵字使文字高亮

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