RosettaJS: Comparativas de Vue, React y Angular

View Logic

Inserting a String as HTML

If a variable contains a text string with HTML tags, its content can be shown in the template by interpreting those tags as HTML instead of text. Only trusted content should be used, as untrusted HTML can enable XSS attacks.

Example

Adding a text message that contains HTML code.

Vuev-html

<script setup lang="ts">
const message = '<strong>New</strong> message'
</script>

<template>
  <p v-html="message"></p>
</template>

It uses v-html to insert a text string as HTML.

Vue docs

ReactdangerouslySetInnerHTML

const message = {
  __html: '<strong>New</strong> message',
}

function HtmlMessage() {
  return <p dangerouslySetInnerHTML={message} />
}

It uses the special dangerouslySetInnerHTML property with an object that contains __html.

React docs

Angular[innerHTML]

import { Component } from '@angular/core'

@Component({
  selector: 'app-html-message',
  standalone: true,
  template: `<p [innerHTML]="message"></p>`,
})
export class HtmlMessageComponent {
  message = '<strong>New</strong> message'
}

It uses the [innerHTML] binding and automatically sanitizes potentially unsafe HTML.

Angular docs