RosettaJS: Comparativas de Vue, React y Angular

Logica de vista

Insertar una Cadena de Texto como HTML

Si una variable contiene una cadena de texto con etiquetas HTML, es posible mostrar su contenido en el template interpretando esas etiquetas como HTML en lugar de texto. Solo debe usarse contenido confiable, ya que el HTML no confiable puede permitir ataques XSS.

Ejemplo

Añadir un mensaje de texto que contiene código HTML.

Vuev-html

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

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

Usa v-html para insertar una cadena de texto como HTML.

Vue docs

ReactdangerouslySetInnerHTML

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

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

Usa la propiedad especial dangerouslySetInnerHTML con un objeto que contiene __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'
}

Usa el binding [innerHTML] y sanea automáticamente el HTML potencialmente inseguro.

Angular docs