VUEは、キーワードによる検索の強調表示を実現します

ニーズは二つの問題に対処するように、そこに検索キーワードの既存のリストの需要があり、キーワードのリストに関連するキーワードを含むデータ項目を表示して強調しました。

1.検索キーワードフィルタリングリストデータ

2.各リストには、キーを強調します

PS：この問題に基づいて、オブジェクトの配列は、他のタイプのデータは、この考えを参照することができます。

検索キーワード：フィルタデータは、検索を聞く以外の何物でも非常に単純ではありません、あなたは以下のコードを貼り付け、ソースデータをフィルタリングすることができます。

1 CONST探索= この.search
 2  であれば（検索）{
 3      本 .showdata = この .copyshowdata.filter（データ=> {
 4           リターン Object.keys（データ）.some（キー=> {
 5               リターン文字列（データ[キー]）のindexOf（検索）> -1
 6          }）
 7      }）       
 8 } 他{
 9      この .showdata = これは.copyshowdata
 10 }

showdataがページに表示され、copyshowdataは、それが何もしない、復元リストを使用し、showdataコピーです。

上記の検索は、時計モニタ値変更処理は、計算showdataプロパティを使用して計算することができる使用することです。

ハイライトキーワード：showDataアイデアが横断されるが、各項目の値は、使用して、定期的なマッチング（また、指定した項目に一致する）である<スパンクラス=「ハイライトテキストを」> </ span>の検索を置き換えます

1つの ハイライト（）{
 2          CONST =サーチこの.searchを
 3          本 .showdata = この .showdata.map（項目=> {
 4            用（LETキーでアイテム）{
 5              IF（キー=== 'Issuecontent' ）{
 6                LET = replaceReg 新しい新しい正規表現（検索'G'）//が定期的にキーと一致する
。7                + +検索'<スパンクラス= "テキストのハイライト">' ReplaceString =ましょう'</ span>の' // 代替V-HTMLを強調値
8                項目[+キー'-highlights'] =項目[キー] .replace（replaceReg、replaceString）// 交換を開始する
。9              }
 10            }
 11            リターン項目
 12である         }）
 13です        }

V-HTML = "項目[キーハイライト]" を使用すると、ページのレンダリング

スタイルもレンダリング後別々に処理する必要があり、そうでないスタイルが有効になりません、親は、上記に追加することはできません、と範囲を削除します。

1  <スタイルのlang = "SCSS">
 2    .highlightsテキスト {
 3      色：＃1 ff5134。
4    }
 5  </スタイル>

レンダリングを投稿：

VUEは、キーワードによる検索の強調表示を実現します

おすすめ