在 Vue 3 中，当使用 v-html 渲染包含 HTML 标签（如 ）的字符串时，若目标元素内存在子节点（包括文本、注释或嵌套标签）或绑定其他指令/属性（如 class、@click），将触发警告“v-html will override element children”，导致内容不渲染。核心解决方案是确保 v-html 所在元素为纯净容器——无子节点、无多余属性。

在 vue 3 中，当使用 `v-html` 渲染包含 html 标签（如 `dompurify）：

import DOMPurify from 'dompurify'

// 在 setup 或 computed 中净化
const safeDescription = computed(() => 
  DOMPurify.sanitize(subField.value.description)
)

然后模板中使用：

<span v-html="safeDescription"></span>

遵循“纯净容器 + 输入净化”双原则，即可在 Vue 3 中安全、稳定地渲染富文本列表内容。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！