vue实现搜索列表 关键词高亮

推荐一款AI网站 AI写作与AI绘画智能创作平台 - 海鲸AI | 智能AI助手，可以免费领取GPT3.5无限卡

在Vue中实现搜索列表关键词高亮的功能，你可以创建一个自定义指令或者使用计算属性结合v-html指令。这里提供一个使用计算属性的简单示例：

首先，你需要一个列表（数组）和一个搜索关键词（字符串）作为数据：

<template>
  <div id="app">
    <input type="text" v-model="searchKeyword" placeholder="Search..." />

    <ul>
      <li v-for="item in highlightedList" v-html="item"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      list: [
        'Apple',
        'Banana',
        'Cherry',
        'Date',
        'Elderberry',
        'Fig',
        'Grape',
        // ... 更多水果
      ],
    };
  },
  computed: {
    highlightedList() {
      if (!this.searchKeyword.trim()) {
        return this.list;
      }
      const regex = new RegExp(`(${this.escapeRegExp(this.searchKeyword)})`, 'gi');
      return this.list.map(item => {
        return item.replace(regex, '<span class="highlight">$1</span>');
      });
    },
  },
  methods: {
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    },
  },
};
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在这个示例中，我们做了以下几步：

1. 创建了一个input元素，使用v-model绑定到searchKeyword数据属性上，这样用户输入的搜索关键词就会同步到这个属性。

2. 使用v-for指令遍历highlightedList计算属性生成列表项。

3. highlightedList计算属性会检查searchKeyword是否有值，如果没有，就返回原始列表。如果有值，它会创建一个正则表达式来匹配关键词，并用<span>标签包裹匹配到的关键词以实现高亮效果。

4. escapeRegExp方法用于转义用户输入的任何可能会影响正则表达式的特殊字符。

5. v-html指令用于将计算属性中返回的带有HTML标签的字符串渲染到页面上。

6. .highlight类定义了高亮样式，这里简单地将背景设置为黄色。

注意：使用v-html可能会导致跨站脚本（XSS）攻击，因为它可以渲染HTML。在这个例子中，因为我们只是替换了由用户输入的纯文本关键词，所以是安全的。但是如果你的数据来源不可靠，你应该使用其他方法来避免XSS攻击。