当前位置：首页 > VUE

vue如何实现高亮

2026-02-11 10:04:35VUE

Vue 实现高亮的方法

在 Vue 中实现高亮功能可以通过多种方式完成，具体取决于应用场景和需求。以下是几种常见的方法：

使用 v-html 指令动态渲染高亮内容

通过绑定 v-html 指令，可以动态渲染包含 HTML 标签的字符串，从而实现高亮效果。例如，可以将匹配的关键词包裹在 <span> 标签中并添加 CSS 样式。

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

<script>
export default {
  data() {
    return {
      originalText: '这是一个示例文本，用于演示高亮功能。',
      keyword: '示例'
    };
  },
  computed: {
    highlightedText() {
      return this.originalText.replace(
        new RegExp(this.keyword, 'g'),
        '<span class="highlight">$&</span>'
      );
    }
  }
};
</script>

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

使用自定义指令实现高亮

通过自定义指令可以更灵活地控制高亮行为。例如，创建一个 v-highlight 指令，根据传入的关键词动态高亮文本内容。

<template>
  <div v-highlight="keyword">{{ originalText }}</div>
</template>

<script>
export default {
  data() {
    return {
      originalText: '这是一个示例文本，用于演示高亮功能。',
      keyword: '示例'
    };
  },
  directives: {
    highlight: {
      inserted(el, binding) {
        const text = el.textContent;
        const keyword = binding.value;
        const regex = new RegExp(keyword, 'g');
        el.innerHTML = text.replace(
          regex,
          '<span class="highlight">$&</span>'
        );
      }
    }
  }
};
</script>

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

使用第三方库实现复杂高亮

对于更复杂的高亮需求，可以使用第三方库如 mark.js。这些库提供了更多高级功能，例如多关键词高亮、区分大小写等。

安装 mark.js：

npm install mark.js

在 Vue 中使用：

<template>
  <div ref="content">{{ originalText }}</div>
</template>

<script>
import Mark from 'mark.js';

export default {
  data() {
    return {
      originalText: '这是一个示例文本，用于演示高亮功能。',
      keyword: '示例'
    };
  },
  mounted() {
    const markInstance = new Mark(this.$refs.content);
    markInstance.mark(this.keyword, {
      className: 'highlight'
    });
  }
};
</script>

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

使用 CSS 类动态切换高亮

如果高亮需求较为简单，可以通过动态绑定 CSS 类来实现。例如，根据条件切换高亮样式。

<template>
  <div>
    <span :class="{ highlight: isHighlighted }">{{ text }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '高亮文本',
      isHighlighted: true
    };
  }
};
</script>

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