RosettaJS: Comparativas de Vue, React y Angular

Logica de vista

Clases Dinámicas

Las clases dinámicas permiten aplicar o quitar clases CSS según los datos o el estado de la aplicación.

Ejemplo

Deshabilitar el botón de envío hasta que un formulario sea válido.

Vue:class

<script setup lang="ts">
const isFormValid = false
</script>

<template>
  <button :class="{ disabled: !isFormValid }" :disabled="!isFormValid">
    Submit
  </button>
</template>

Usa el binding :class con un objeto para aplicar la clase disabled cuando el formulario no es válido.

Vue docs

ReactclassName

function SubmitButton() {
  const isFormValid = false

  return (
    <button className={isFormValid ? '' : 'disabled'} disabled={!isFormValid}>
      Submit
    </button>
  )
}

Asigna className con una expresión ternaria para aplicar la clase disabled cuando el formulario no es válido.

React docs

Angular[class.selected]

import { Component } from '@angular/core'

@Component({
  selector: 'app-submit-button',
  standalone: true,
  template: `
    <button [class.disabled]="!isFormValid" [disabled]="!isFormValid">
      Submit
    </button>
  `,
})
export class SubmitButtonComponent {
  isFormValid = false
}

Usa un class binding para aplicar la clase disabled cuando el formulario no es válido.

Angular docs