Vue实现模糊查询并为关键字添加颜色

在Vue开发中，实现模糊查询并为关键字添加颜色是一个常见需求，它能有效提升用户体验，让用户快速定位到所需信息。下面将详细介绍如何实现这一功能。

创建一个Vue项目并设置基本的HTML结构。在模板中，添加一个输入框用于输入查询关键字，以及一个列表展示查询结果。例如：

<template>
  <div>
    <input v-model="searchText" placeholder="请输入关键字">
    <ul>
      <li v-for="(item, index) in filteredList" :key="index">
        {{ highlightText(item) }}
      </li>
    </ul>
  </div>
</template>

在上述代码中，searchText用于存储用户输入的关键字，filteredList是经过过滤后的列表数据，highlightText方法用于为匹配的关键字添加颜色。

接着，在Vue组件的script部分定义数据和方法：

export default {
  data() {
    return {
      searchText: '',
      list: ['苹果', '香蕉', '橙子', '葡萄', '西瓜']
    }
  },
  computed: {
    filteredList() {
      if (!this.searchText) {
        return this.list;
      }
      return this.list.filter(item => item.includes(this.searchText));
    }
  },
  methods: {
    highlightText(text) {
      if (!this.searchText) {
        return text;
      }
      const reg = new RegExp(this.searchText, 'gi');
      return text.replace(reg, `<span style="color: red;">$&</span>`);
    }
  }
}

在data中定义了初始数据，searchText初始为空字符串，list是要展示的数据列表。computed中的filteredList方法根据用户输入的关键字对列表进行过滤。methods中的highlightText方法则使用正则表达式，将匹配的关键字替换为带有红色样式的<span>标签包裹的内容，从而实现关键字颜色高亮。

需要注意的是，由于直接使用innerHTML会有安全风险，在实际应用中，要确保用户输入是经过安全过滤的。

通过上述步骤，就能在Vue中轻松实现模糊查询并为关键字添加颜色的功能，为用户提供更友好的搜索体验，提升应用的交互性和实用性。