我要招人

前端/移动开发面试题更新 2026-08-05

在 Vue 2.0 中，v-html 指令已不再支持过滤器功能。针对需要在模板中渲染 HTML 内容的场景，有哪些替代方案或处理方式？

前端/移动开发风险判断技术原理Vue

考察说明

考查对 Vue 2.0 模板渲染限制的掌握，以及处理动态 HTML 内容的多种方法。

回答思路

  1. 【回答框架 1】Vue 2.0 中，v-html 指令用于输出原始 HTML，但不再支持过滤器，因为过滤器主要作用于插值表达式。替代方案之一是使用计算属性或方法，在绑定前对 HTML 字符串进行处理，例如通过方法返回处理后的 HTML，再在模板中绑定。
  2. 【回答框架 2】另一种常见做法是在组件内定义过滤函数，在数据层完成转换，保持模板简洁。如果需要对 HTML 内容做复杂处理，可以考虑使用自定义指令，在指令的钩子函数中操作 DOM，实现类似过滤器的功能。
  3. 【回答框架 3】对于需要安全渲染的场景，建议先对 HTML 进行净化处理，避免 XSS 风险。可以使用第三方库如 DOMPurify 对内容进行过滤，再通过 v-html 输出。
  4. 【回答框架 4】如果只是简单文本替换，可以使用 JavaScript 的字符串方法在数据获取或计算属性中处理，而不是依赖模板过滤器。
  5. 【回答框架 5】需要明确的是，v-html 会覆盖元素内部内容，使用时需注意优先级和安全性。
  6. 【关键点 1】v-html 不支持过滤器，但可通过计算属性或方法预处理 HTML。
  7. 【关键点 2】自定义指令可以替代过滤器对 DOM 操作的需求。
  8. 【关键点 3】渲染 HTML 前应进行安全净化，防止 XSS。
  9. 【关键点 4】简单文本处理宜在数据层完成，保持模板简洁。
  10. 【关键点 5】v-html 会替换元素内容，使用时需确保内容可信。
  11. 【易错点 1】常见误区是尝试在 v-html 中使用过滤器语法，实际会失效。
  12. 【易错点 2】忽略 XSS 风险，直接渲染不可信内容可能导致安全漏洞。
  13. 【易错点 3】过度使用 v-html 可能影响性能，频繁更新大段 HTML 时应考虑其他方式。