在 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