当前位置：首页 > VUE

vue如何实现文字高亮

2026-02-21 11:14:52VUE

实现文字高亮的方法

在Vue中实现文字高亮通常可以通过以下几种方式完成，具体选择取决于需求场景。

使用v-html指令绑定HTML内容

通过动态生成包含高亮样式的HTML字符串，并使用v-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>
  <p :class="{ 'highlight': isHighlighted }">这段文字可能被高亮</p>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: true
    }
  }
}
</script>

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

使用第三方库

对于更复杂的高亮需求，可以使用专门的高亮库如mark.js或vue-highlight-words。

安装vue-highlight-words：

npm install vue-highlight-words

使用示例：

<template>
  <Highlighter
    :text="text"
    :query="searchQuery"
    highlightClass="highlight"
  />
</template>

<script>
import Highlighter from 'vue-highlight-words'

export default {
  components: { Highlighter },
  data() {
    return {
      text: '这是一段需要高亮的文本',
      searchQuery: '高亮'
    }
  }
}
</script>

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

实现搜索高亮功能

结合搜索功能实现动态高亮匹配文本。

<template>
  <div>
    <input v-model="searchTerm" placeholder="输入搜索词" />
    <div v-html="highlightMatches(content, searchTerm)"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一段包含多个关键词的文本，关键词可能重复出现',
      searchTerm: ''
    }
  },
  methods: {
    highlightMatches(text, query) {
      if (!query) return text
      const regex = new RegExp(query, 'gi')
      return text.replace(regex, match => 
        `<span class="highlight">${match}</span>`
      )
    }
  }
}
</script>