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

相关代码

<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>

实际上渲染出的代码是
image.png

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

阅读 516
评论 3月26日提问
    4 个回答
    Dopp
    • 1.1k
    <script>
    export default {
      ....
      data() {
        return {
          res:"你好这是<i style='color:red'>红色<i>的文字"  // 这里标签没有闭合? </i>
        };
      },
    };
    </script>
    评论 赞赏 3月26日
      yune
      • 184
      "你好这是<i style='color:red'>红色<i>的文字"

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

      评论 赞赏 3月26日

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

        评论 赞赏 3月26日

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

          评论 赞赏 3月27日
            撰写回答

            登录后参与交流、获取后续更新提醒