RosettaJS: Comparativas de Vue, React y Angular

View Logic

Dynamic Classes

Dynamic classes let you add or remove CSS classes based on application data or state.

Example

Disabling a submit button until a form is valid.

Vue:class

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

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

It uses the :class binding with an object to apply the disabled class when the form is not valid.

Vue docs

ReactclassName

function SubmitButton() {
  const isFormValid = false

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

It assigns className with a ternary expression to apply the disabled class when the form is not valid.

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
}

It uses a class binding to apply the disabled class when the form is not valid.

Angular docs