vue2 - 为什么 Vue2 中的 v-html 渲染的 <p> 标签结构会发生变化？

Question

v-html渲染<p>标签时渲染的结构与传入的结构不一致

<script>
export default {
  data() {
    return {
      html: `<p>` +
                `<a target="_blank">` +
                    `<div>` +
                        `aaaaaaa` +
                    `</div>` +
                `</a>` +
            `</p>`
    }
  }
}
</script>

<template>
  <div v-html="html"></div>
</template>

传入的字符串结构是:
-p
-a

-div
  -text

但是渲染出来的结构却是混乱的，经测试去掉<p>标签后就正常了。
使用的是vue2，由于在做的是编辑器，所以不可避免地有<p>标签的情况，想问下这是什么原因导致的渲染异常

Answer 1

这个和 vue2 无关，你可以单纯写一个 html 文件试试；

段落是块级元素，如果在关闭的 </p> 标签之前解析了另一个块级元素，则该标签将自动关闭。

标准是这样 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p

Answer 2

在 Vue2 中使用 v-html 指令时遇到 <p> 标签内嵌套 <a> 标签和 <div> 标签导致渲染结构异常的问题，主要是因为 HTML 的结构规范和浏览器的解析方式。

原因解释

1. HTML 结构规范：根据 HTML 的规范，<p> 元素（段落元素）是所谓的“流式内容”的容器，它只能包含内联元素（如 <span>、<a> 等）和其他的块级元素（如 <div> 理论上不是直接允许的，尽管某些浏览器可能允许，但这不是标准行为）。然而，<a> 元素（锚点元素）虽然通常是内联元素，但在某些情况下（如包含块级元素时）会表现得像块级元素。
2. 浏览器解析：当浏览器解析到 <p> 标签内包含 <a> 标签，而 <a> 标签内又包含 <div> 标签时，它可能会尝试修复这种非标准结构。由于 <div> 是块级元素，而 <p> 期望内联或块级但非 <div> 的内容，浏览器可能会重新排列或忽略某些标签，以符合 HTML 的“预期”结构。
3. Vue 的 v-html：Vue 的 v-html 指令只是简单地将字符串作为 HTML 插入到元素中，并不改变或验证 HTML 的结构。因此，任何 HTML 结构的错误或不符合规范的地方都会在渲染时由浏览器处理。

解决方案

1. 避免在 <p> 标签内使用 <div>：如果可能，重新设计你的 HTML 结构，避免在 <p> 标签内使用 <div>。例如，你可以将 <div> 替换为 <span> 或其他内联元素，或者将 <p> 替换为 <div>（如果适合你的布局）。
2. 使用 Vue 组件：如果你正在开发一个编辑器，考虑使用 Vue 组件来管理不同的元素和结构，而不是直接通过 v-html 插入复杂的 HTML 字符串。这样可以更好地控制渲染过程和结构。
3. HTML 验证：在开发过程中使用 HTML 验证工具来检查你的 HTML 结构是否符合规范，这有助于识别和修复潜在的问题。

通过上述方法，你可以避免在 Vue 应用中遇到由于 HTML 结构不规范而导致的渲染问题。