How to bind data in Vue with v-bind

<template>
  <div>
    <!-- Attribute binding -->
    <img v-bind:src="imageUrl" v-bind:alt="imageAlt">

    <!-- Shorthand syntax -->
    <img :src="imageUrl" :alt="imageAlt">

    <!-- Class binding -->
    <div :class="dynamicClass">Dynamic classes</div>
    <div :class="{ active: isActive, disabled: isDisabled }">
      Conditional classes
    </div>

    <!-- Style binding -->
    <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
      Dynamic styles
    </div>

    <!-- Multiple attributes -->
    <button
      :disabled="isLoading"
      :class="buttonClass"
      :title="buttonTooltip"
      @click="handleClick">
      {{ buttonText }}
    </button>

    <!-- URL binding -->
    <a :href="profileUrl">View Profile</a>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

let imageUrl = ref('/images/avatar.jpg')
let imageAlt = ref('User avatar')
let isActive = ref(true)
let isDisabled = ref(false)
let isLoading = ref(false)
let textColor = ref('#007bff')
let fontSize = ref(16)

let dynamicClass = computed(() => ({
  'btn': true,
  'btn-primary': !isLoading.value,
  'btn-loading': isLoading.value
}))

let buttonClass = computed(() =>
  isLoading.value ? 'btn btn-secondary' : 'btn btn-primary'
)

let buttonText = computed(() =>
  isLoading.value ? 'Loading...' : 'Submit'
)

let buttonTooltip = ref('Click to submit form')
let profileUrl = ref('/user/profile')

let handleClick = () => {
  isLoading.value = !isLoading.value
}
</script>