当前位置：首页 > VUE

vue如何实现高亮

2026-03-08 09:42:30VUE

Vue 实现高亮的方法

使用 `v-html` 绑定 HTML 内容

通过 v-html 指令动态插入包含高亮样式的 HTML 内容。适用于需要直接渲染富文本的场景。

<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 style="background-color: yellow;">$&</span>'
      );
    }
  }
};
</script>

使用 CSS 类动态绑定

通过 :class 或 :style 动态绑定样式，结合字符串处理实现高亮效果。适合需要精细控制样式的场景。

<template>
  <div>
    <span 
      v-for="(word, index) in words" 
      :key="index"
      :class="{ 'highlight': word === keyword }"
    >
      {{ word }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '拆分文本为单词数组',
      keyword: '文本'
    };
  },
  computed: {
    words() {
      return this.text.split(' ');
    }
  }
};
</script>

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

使用第三方库

对于复杂的高亮需求（如代码高亮），可使用专门的高亮库如 highlight.js 或 prismjs。

<template>
  <div>
    <pre><code v-html="highlightedCode"></code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default {
  data() {
    return {
      code: 'console.log("Hello, Vue!");'
    };
  },
  computed: {
    highlightedCode() {
      return hljs.highlight(this.code, { language: 'javascript' }).value;
    }
  }
};
</script>

自定义指令

封装高亮逻辑为自定义指令，实现复用性。适合需要多处高亮且逻辑一致的场景。

vue如何实现高亮

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

<script>
export default {
  data() {
    return {
      text: '自定义指令实现高亮',
      keyword: '指令'
    };
  },
  directives: {
    highlight: {
      inserted(el, binding) {
        const regex = new RegExp(binding.value, 'g');
        el.innerHTML = el.textContent.replace(
          regex,
          '<span style="background-color: yellow;">$&</span>'
        );
      }
    }
  }
};
</script>