vue实现搜索内容高亮

效果：

这个实现的方法有很多种，我这个方法用的是computed来实现的，代码如下！

HTML

<template>
  <div>
    <input type="text" v-model="searchText">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        <span v-html="highlightText(item.text)"></span>
      </li>
    </ul>
  </div>
</template>

JS

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'search',
  data () {
    return {
      searchText: '',
      items: [
        { id: 1, text: '苹果' },
        { id: 2, text: '香蕉' },
        { id: 3, text: '橙子' },
        { id: 4, text: '苹果派' },
        { id: 5, text: '橙汁' }
      ]
    }
  },
  computed: {
    filteredItems () {
      if (this.searchText === '') {
        return this.items
      }
      return this.items.filter(item => item.text.includes(this.searchText))
    }
  },
  methods: {
    highlightText (value) {
      // gi表示全局搜索这个关键字 i表示不区分大小写
      const regex = new RegExp(this.searchText, 'gi')
      // 【$&】是特殊的替换模式，代表本身，比如regex这时候是苹果，那么$&就是苹果
      return value.replace(regex, '<span class="highlight">$&</span>')
    }
  }
}
</script>

CSS

<style>
.highlight {
  color: red;
}
</style>

?