技術標籤：vue 搜尋關鍵字 結果文字高亮

雖然常見，但還這是頭一次碰到這種需求，研究了半天，還是正則匹配比較靠譜。
廢話不多說，直接上程式碼

<template>
  <div>
    <input type="text" v-model="keyWork">
    <div v-for="(item,index) in info" :key="index">
      <div v-html="ruleKeyWord(item.name)"
 
></div>
    </div>
  </div>
</template>

<script>
export default {
 data() {
   return {
     keyWork: 'woshi',
     info: [
       {
         id: 0,
         name: '你好呀'
       },
       {
         id: 1,
         name: 'haohao'
       },
       {
         id: 2,
         name:
 
 'haha'
       },
       {
         id: 3,
         name: 'haohao'
       },
       {
         id: 4,
         name: 'woshi'
       },
       {
         id: 5,
         name: 'woshi'
       },
       {
         id: 6,
         name: 'jiayou'
       },
       {
         id: 7,
         name: 'woshi'
       }
 

     ]
   }
 },
 methods: {
   ruleKeyWord(res) {
     let rep = new RegExp(this.keyWork, "g");
     let repText = `<span style='color:mediumslateblue;'>${this.keyWork}</span>`;
     return res.replace(rep, repText);
   }
 }
}
</script>

效果圖：

此時，在input框中更改關鍵字，下面的結果就會根據關鍵字進行高亮。