时间戳

首页 > 解决方案 > 在 v-html 属性中显示原始 html

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

问题描述

我发现从 vue 代码渲染 html 的问题。我需要从带有原始html的vue生成跨度

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

标签： javascripthtmlvue.js

解决方案

<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>标签并没有过时，并且它们在浏览器中的实现是一致的。

推荐阅读