3 - vue项目通过v-html渲染的内容怎么保留dom标签、原有的样式

在Vue中使用v-html指令时，如果想要渲染<和>之间的标签，可以使用HTML实体来表示这些特殊字符。HTML实体是用来表示保留字符或非ASCII字符的编码序列，通过正则将dom标签的“<”转义成“<”，将“>”转义成“>”，这样dom标签就能通过文本的形式渲染出来。

一、效果

二、代码

<template>
  <div v-html="replacedHtml(originalHtml)" class="content"></div>
</template>

<script>
export default {
  data() {
    return {
      originalHtml: "<p>这是一段包含<标签>的HTML内容</p>",
    };
  },
  methods: {
    replacedHtml(html) {
      // 使用正则表达式替换<为&lt;，>为&gt;
      const regex = /</g,
        regex2 = />/g,
        replacedHtml = html
          .replace(regex, "&lt;")
          .replace(regex2, "&gt;");
      return replacedHtml;
    },
  },
};
</script>
<style>
.content {
  white-space: pre-wrap; /* 用来控制容器的文本中带有空白符、换行符等的显示 */
}
</style>

pre-wrap ：保留空白符序列，但是正常地进行换行。