当前位置：首页 > VUE

vue如何实现高亮

2026-01-15 07:01:35VUE

实现文本高亮的方法

在Vue中实现文本高亮通常可以通过以下几种方式完成：

使用v-html指令结合字符串替换 通过将需要高亮的文本部分替换为HTML标签（如<span class="highlight">），然后使用v-html渲染结果。注意需要对原始文本进行转义以防止XSS攻击。

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

<script>
export default {
  props: ['text', 'searchTerm'],
  computed: {
    highlightedText() {
      if (!this.searchTerm) return this.text;
      const regex = new RegExp(this.searchTerm, 'gi');
      return this.text.replace(regex, match => 
        `<span class="highlight">${match}</span>`
      );
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>

使用自定义指令 创建一个自定义指令v-highlight，在指令的update钩子中操作DOM元素实现高亮效果。

vue如何实现高亮

Vue.directive('highlight', {
  inserted(el, binding) {
    highlightElement(el, binding.value);
  },
  update(el, binding) {
    highlightElement(el, binding.value);
  }
});

function highlightElement(el, searchTerm) {
  if (!searchTerm) {
    el.innerHTML = el.textContent;
    return;
  }
  const text = el.textContent;
  const regex = new RegExp(searchTerm, 'gi');
  el.innerHTML = text.replace(regex, match => 
    `<span class="highlight">${match}</span>`
  );
}

使用第三方库 考虑使用专门的高亮库如mark.js，它提供了更丰富的高亮功能。

import Mark from 'mark.js';

export default {
  mounted() {
    const instance = new Mark(this.$el);
    instance.mark(this.searchTerm);
  },
  watch: {
    searchTerm(newVal) {
      const instance = new Mark(this.$el);
      instance.unmark().mark(newVal);
    }
  }
}

动态高亮搜索关键词

对于搜索场景，可以结合输入框动态更新高亮内容：

vue如何实现高亮

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <div v-html="highlightedContent(content)"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      content: '这里是需要被高亮的文本内容...'
    }
  },
  methods: {
    highlightedContent(text) {
      if (!this.searchQuery) return text;
      const regex = new RegExp(this.searchQuery, 'gi');
      return text.replace(regex, match => 
        `<span style="background-color: #ffeb3b;">${match}</span>`
      );
    }
  }
}
</script>