在 v-html 属性中显示原始 html

Question

我发现从 vue 代码渲染 html 时出现问题。 我需要从 vue 生成跨度，里面有原始的 html

<table>
    <tr>
        <td style="width:33%" v-html="diffText"></td>
    </tr>
</table>

this.diff.forEach((part) => {
    let color = part.added ? 'green' :
                    part.removed ? 'red' : 'grey';
    this.diffText += "<span style='color:" + color + "'>" + part.value + "</span>";
});

part.value是原始的 html。

Answer 1

<table>
  <tr>
    <td style="width:33%">
      <pre v-for="(d, key) in diff"
           :key="key"
           :style="{ color: getColor(d) }"
           v-html="d.value" />
    </td>
  </tr>
</table>

...
  methods: {
    getColor(d) {
      return d.added ? 'green' : d.removed ? 'red': 'grey' 
    }
  }
...

...很可能会产生您正在寻找的结果。 由于<pre>标签的内容不会被解释为 HTML，因此您也可以在此处使用v-text而不是v-html 。

注意：与<xmp>不同， <pre>标签并没有过时，它们在浏览器中的实现是一致的。

Answer 2

我发现最好的解决方案是将所有“<”替换为“<”，将“>”替换为“>”

Answer 3

您可以使用<xmp>标签。

<xmp>
    <div> I am a Div</div>
</xmp>

这将呈现<div> I am a Div</div> 。

更多的方法来做到这一点：

1. 替换原始 html 字符串中的一些特殊字符：

• 将&字符替换为&
• 将<字符替换为<
• 将>字符替换为&gt