Dynamic Property Binding

Vuev-bind

<script setup lang="ts">
import { ref } from 'vue'

const isDisabled = ref(true)
</script>

<template>
  <button :disabled="isDisabled">Save changes</button>
</template>

Prefixing the property name with : is the shorthand for using the v-bind directive.

Vue docs

ReactJSX expressions

import { useState } from 'react'

function ProfileForm() {
  const [isDisabled] = useState(true)

  return (
    <>
      <button disabled={isDisabled}>Save changes</button>
    </>
  )
}

In JSX, a property value is written in curly braces to evaluate a JavaScript expression.

React docs

Angularproperty binding

import { Component, signal } from '@angular/core'

@Component({
  selector: 'app-profile-form',
  standalone: true,
  template: `
    <button [disabled]="isDisabled()">Save changes</button>
  `,
})
export class ProfileFormComponent {
  isDisabled = signal(true)
}

Wrapping a property name in square brackets creates a property binding.

Angular docs