Renderizado Condicional

Vuev-if / v-else

<script setup lang="ts">
defineProps<{
  isLogged: boolean
}>();
</script>

<template>
  <div>
    <p v-if="isLogged">Welcome again</p>
    
    <button v-if="isLogged">Sign out</button>
    <button v-else>Sign in</button>
  </div>
</template>

Se usan las directivas v-if y v-else del template para mostrar contenido distinto según una condición booleana.

Vue docs

React&& / ternary

function Hello({ isLogged }: { isLogged: boolean }) {
  return (
    <div>
      {isLogged && <p>Welcome again</p>}
      
      {isLogged ? (
        <button>Sign out</button>
      ) : (
        <button>Sign in</button>
      )}
    </div>
  );
}

Resuelve la condición dentro del propio JSX usando expresiones de JavaScript como && y el operador ternario.

React docs

Angular@if / @else

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `
    @if (isLogged) {
      <p>Welcome again</p>
      <button>Sign out</button>
    } @else {
      <button>Sign in</button>
    }
  `
})
export class HelloComponent {
  @Input() isLogged: boolean = false;
}

Usa bloques @if y @else en el template para decidir que contenido se muestra.

Angular docs