Vue.js使用v-html渲染时li元素的数字序号不生效如何解决？

DevOps 小满

2026-9-30

问题原因

你使用p标签作为v-html的外层容器，不符合HTML规范要求：p标签是文本级块元素，内部仅允许嵌套行内元素，不能嵌套ol（有序列表）、ul（无序列表）这类块级元素。浏览器解析到p标签内部出现列表标签时，会自动提前闭合p标签，将列表拆到外层，破坏原始富文本结构，导致数字列表无法正常渲染。

解决方案

方案1（最便捷）：替换外层容器
把p标签替换为支持嵌套块级元素的通用容器div即可，修改后的代码如下：
```
div(v-html="selectedProduct.description")
```
方案2（保留语义化）：使用语义化块级容器
若需要对外层内容加语义标识，可以替换为article、section这类允许嵌套块级元素的语义化标签，同样不会破坏列表结构。
可选补充：修复CSS重置导致的列表样式丢失
如果你修改容器后列表依旧没有显示序号，大概率是全局CSS重置规则给ol、li设置了list-style: none，可以给富文本渲染容器单独加样式恢复默认列表表现：
```
/* 给外层容器加自定义类名rich-text-wrapper即可 */
.rich-text-wrapper ol {
  list-style: decimal;
  padding-left: 2em;
}
.rich-text-wrapper li {
  display: list-item;
}
```