vue模糊搜索关键字高亮

Vue 模糊搜索关键词高亮通常是在前端开发中用于增强用户搜索体验的一种常见技巧。它会在列表中的数据元素中匹配到用户的输入关键词，并将其部分或全部替换为带有特定样式的文本，以便突出显示。在 Vue.js 中，这通常通过以下几个步骤实现：

1. **模板绑定**: 使用 v-bind 或者 v-html 渲染内容并监听输入事件，如 `v-bind:class="{ highlight: keyword }"`。

<div v-for="(item, index) in filteredItems" :key="index" v-bind:class="{ highlight: item.includes(keyword) }">
  <span v-html="highlightText(item, keyword)" />
</div>

2. **`highlightText()` 函数**: 这个函数接收原始字符串和关键词，返回一个新的字符串，其中包含关键词的部分并应用高亮样式。

methods: {
  highlightText(text, keyword) {
    return text.replace(new RegExp(`\\b${keyword}\\b`, 'gi'), `<span class="search-highlight">$&</span>`);
  }
}

这里的 `\\b` 是单词边界，确保只有完整的关键词会被高亮。

3. **CSS 配置**: 编写 CSS 样式来定义 `.search-highlight` 的外观，比如背景色、下划线等。

.search-highlight {
  background-color: yellow; /* 可自定义 */
  color: red;
  cursor: pointer;
}