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

2021-09-25 08:58:06 字數 771 閱讀 4196

先看效果圖:

首先實現搜尋功能

景點搜尋:

通過computed計算屬性監聽搜尋內容的變化

computed: 

}return arrbyzm;// 返回新的陣列}},

以上實現搜尋功能

下邊實現搜尋關鍵字高亮顯示

使用v-html繫結方法名並傳遞兩個引數,第乙個引數是:景點名稱;第二個引數是:搜尋框內輸入的搜尋內容

景點:

位置:

在methods中新增方法讓搜尋到的關鍵字高亮顯示(以下提供兩種方法,本人使用的是第二種)

methods: else 

// 方法2:用正規表示式

const reg = new regexp(keyword, 'i');

if (val) `);

// console.log(res);

return res;}},

},

至此完成搜尋效果及搜尋結果關鍵字高亮效果。

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...

搜尋功能,關鍵字高亮顯示

如下,直接呼叫即可 搜尋關鍵字高亮 param view param value param keys 由key.spilt 分割獲得 param context public static void setuptextview textview view,final string value,st...