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>标签?

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