[Vuejs]-Display raw html in v-html attribute

-2👍

✅

You can use <xmp> tags.

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

this will render <div> I am a Div</div>.

More ways to do this:

1. Replace some special chars from your raw html string:

Replace the & character with &
Replace the < character with <
Replace the > character with &gt

👤nkkumawat

[Vuejs]-How can i do lazy loading images on vue3?

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' 
    }
  }
...

…will likely produce the result you’re looking for. Since the contents of a <pre> tag does not get intepreted as HTML, you can also use v-text instead of v-html here.

Note: Unlike <xmp>, <pre> tags are not obsolete and their implementation across browsers is consistent.

👤tao