vue实现文本标记

Vue 实现文本标记的方法

在 Vue 中实现文本标记功能，可以通过多种方式完成，以下是几种常见的方法：

使用 v-html 指令

通过 v-html 指令可以直接将 HTML 字符串渲染到 DOM 中，适合动态标记文本内容。

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

<script>
export default {
  data() {
    return {
      markedText: 'This is <mark>highlighted</mark> text.'
    };
  }
};
</script>

使用 CSS 类动态标记

通过绑定 CSS 类，可以实现更灵活的文本标记效果。

<template>
  <div>
    <span :class="{ 'marked-text': isMarked }">This text can be marked</span>
  </div>
</template>

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

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

使用计算属性动态生成标记文本

通过计算属性动态生成带标记的文本，适合复杂逻辑的场景。

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

<script>
export default {
  data() {
    return {
      text: 'This is some text to mark.',
      searchTerm: 'text'
    };
  },
  computed: {
    computedMarkedText() {
      return this.text.replace(
        new RegExp(this.searchTerm, 'gi'),
        match => `<mark>${match}</mark>`
      );
    }
  }
};
</script>

使用第三方库（如 Mark.js）

对于更复杂的文本标记需求，可以使用第三方库如 mark.js。

<template>
  <div ref="markContainer">
    This is some text that will be marked.
  </div>
</template>

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

export default {
  mounted() {
    const markInstance = new Mark(this.$refs.markContainer);
    markInstance.mark('text', {
      className: 'highlight'
    });
  }
};
</script>

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

注意事项

• 使用 v-html 时需注意 XSS 攻击风险，确保内容来源可信。
• 动态生成标记文本时，正则表达式需处理特殊字符。
• 第三方库如 mark.js 提供更多配置选项，适合复杂场景。

以上方法可根据实际需求选择，灵活实现文本标记功能。