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框中更改关键字，下面的结果就会根据关键字进行高亮。