如何在Vue.js中使用数据过滤器添加HTML标签？

嘿，我知道你卡在这儿了——其实问题出在Vue的插值语法默认会转义HTML内容，哪怕你的过滤器返回了带锚点的HTML字符串，{{ }}也会把它当成纯文本输出，所以你看不到预期的锚点链接。下面给你两种靠谱的解决办法：

1. 使用v-html指令替代插值语法 #

Vue提供了v-html指令，它会直接把绑定的内容当作HTML渲染，正好适配你的需求。

示例代码： #

首先定义你的过滤器（Vue 2适用）：

Vue.filter('wrapReference', function(str) {
  // 匹配并替换'See REFERENCE'为带锚点的HTML
  return str.replace(/See REFERENCE/g, 'See <a href="#reference" class="anchor-link">REFERENCE</a>');
});

然后在模板里用v-html替代{{ }}：

<p v-html="yourString | wrapReference"></p>

这样渲染后，REFERENCE就会变成可点击的锚点链接了。

2. Vue 3用户注意：过滤器已被移除，改用计算属性/方法 #

Vue 3中已经移除了过滤器功能，官方推荐用计算属性或者方法来处理这类字符串转换：

计算属性示例： #

<template>
  <p v-html="processedString"></p>
</template>

<script setup>
import { computed } from 'vue';

const yourString = '这里是需要处理的文本，比如See REFERENCE这样的内容';

const processedString = computed(() => {
  return yourString.replace(/See REFERENCE/g, 'See <a href="#reference" class="anchor-link">REFERENCE</a>');
});
</script>

重要提醒 #

使用v-html时要注意XSS安全风险：如果你的字符串内容来自用户输入或者不可信的数据源，一定要先做安全过滤，避免注入恶意代码。不过你提到传入的是普通字符串，所以这块不用太担心～

内容的提问来源于stack exchange，提问作者Varanus