v-html指令为什么会自动地多渲染HTML标签?

Question

相关代码

<template>
  <div class="tableContent">
    <p v-html="res"></p>
  </div>
</template>

<script>
export default {
  ....
  data() {
    return {
      res:"你好这是<i style='color:red'>红色<i>的文字"
    };
  },
};
</script>

问题描述

我希望渲染出的html代码是

<p>你好这是<i style='color:red'>红色<i>的文字</p>

实际上渲染出的代码是

有没有大佬知道为什么会多出红框中的<i></i>标签？

Answer 1

<script>
export default {
  ....
  data() {
    return {
      res:"你好这是<i style='color:red'>红色<i>的文字"  // 这里标签没有闭合？ </i>
    };
  },
};
</script>

Answer 2

"你好这是<i style='color:red'>红色<i>的文字"

上面代码中的<i>标签没有闭合，vue内部识别为有两个<i>标签，然后在父级标签<p>闭合前帮你闭合了<i>，然后导致了两个<i>,具体实现过过程可以去阅读vue源码:
vue html-parser

Answer 3

你这是没有闭合标签导致的

Answer 4

是我粗心了，罪过，感谢各位大佬