先看效果圖:
首先實現搜尋功能
景點搜尋:
通過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...