vue搜索关键字高亮

实现Vue搜索关键字高亮的方法有很多种，以下是其中的一种实现方式：

1. 在Vue组件中定义一个computed属性，用于替换匹配的关键字为带有高亮样式的关键字；

computed: {
  highlightText() {
    const keyword = this.keyword; // 获取关键字
    const content = this.content; // 获取需要匹配的内容
    if (keyword && content) {
      const regExp = new RegExp(keyword, 'ig'); // 创建正则表达式，不区分大小写
      return content.replace(regExp, `<span class="highlight">${keyword}</span>`); // 用带有高亮样式的关键字替换匹配的关键字
    } else {
      return content; // 如果没有关键字或需要匹配的内容，则返回原内容
    }
  }
}

2. 在模板中使用v-html指令将替换后的内容渲染到页面中；

<template>
  <div v-html="highlightText"></div>
</template>

3. 在CSS中定义高亮样式；

.highlight {
  color: red;
  font-weight: bold;
}

这样，当输入关键字后，匹配到的文本就会被用带有高亮样式的关键字替换，从而实现搜索关键字高亮的效果。