Vue2中v-html部分HTML标签不生效问题排查与解决

可能原因 #

• 数据被双重转义：后端返回或本地读取的test字符串已经被HTML转义（比如变成<em>强调文本</em>），而<h2>标签可能未被转义，导致v-html渲染时，转义后的标签直接以源码展示，未转义的<h2>正常渲染。在线环境使用的是未转义的原始字符串，所以能正常显示。
• HTML过滤插件限制：本地项目引入了vue-sanitize之类的HTML内容过滤插件，配置的允许标签列表里只包含<h2>，遗漏了em、ol、li等标签，导致这些标签被过滤转义。在线环境未使用这类插件，所以无限制。
• 本地数据读取时自动转义：从本地JSON文件或其他静态资源读取test数据时，文件内容本身是转义后的HTML实体，或者读取过程中被JSON解析自动转义，导致最终传入v-html的是转义字符串。

解决方法 #

处理双重转义问题 #

检查控制台中test变量的实际值，如果是转义后的实体字符串，可通过前端反转义处理：

// 计算属性处理反转义
computed: {
  renderableTest() {
    // 简单反转义常用实体
    return this.test.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
  }
}

然后在模板中使用：

<div v-html="renderableTest"/>

或者要求后端返回未转义的原始HTML字符串，避免前端二次处理。

调整HTML过滤插件配置 #

如果项目使用了vue-sanitize等过滤插件，修改配置添加允许的标签：

import VueSanitize from 'vue-sanitize';

Vue.use(VueSanitize, {
  allowedTags: ['h2', 'em', 'ol', 'li', 'hr', 'ul', 'blockquote'] // 补充需要的标签
});

修正本地数据内容 #

如果是本地静态数据（如JSON文件）问题，打开数据文件，将转义后的实体（如<em>）替换为原始HTML标签（<em>），确保数据未被转义。

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