vue模糊搜索高亮显示

Vue.js 中实现模糊搜索并高亮显示通常涉及以下几个步骤：

1. **模板（HTML）**：首先在模板中创建输入框和可搜索的数据列表，如一个`<input>`用于用户输入，一个`<ul>`或`<v-for>`循环展示列表项。

<input v-model="searchText" placeholder="Search...">
<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ highlightText(item.name, searchText) }}
  </li>
</ul>

2. **数据绑定和计算属性**：定义一个`searchText`变量来存储用户的输入，以及`filteredItems`计算属性，根据`searchText`过滤数据。

data() {
  return {
    searchText: '',
    items: [...], // 初始化的数据源
  };
},
computed: {
  filteredItems() {
    return this.items.filter(item => item.name.includes(this.searchText));
  }
}

3. **高亮显示函数**：这是一个辅助函数，使用正则表达式或字符串方法找出需要高亮的部分，并替换原字符串。

methods: {
  highlightText(text, searchQuery) {
    const regex = new RegExp(searchQuery, 'gi');
    return text.replace(regex, `<span class="highlight">${searchQuery}</span>`);
  }
},

4. **CSS样式**：为高亮部分添加一个样式类，比如`.highlight`，以改变其颜色或格式。

.highlight {
  background-color: yellow; /* 或者自定义其他样式 */
  font-weight: bold;
}