มาดูวิธีการใช้ Attribute Bindings ใน VueJs กัน

ใน VueJs เราสามารถ Bindings Attribute ได้โดยใช้ v-bind ตามตัวอย่าง

<div v-bind:id="dynamicId"></div>

ข้างหลังที่ :id เป็น Attribute จากตัวอย่างจะเป็นการ Bind Attribute id

เพราะว่า v-bind ใช้บ่อยมาก ดังนั้นเราสามารถเขียนแบบง่าย ๆ ได้ตามตัวอย่างด้านล่าง

<div :id="dynamicId"></div>

สามารถดูรายละเอียดเพิ่มเติมได้ที่ https://vuejs.org/guide/essentials/template-syntax.html

ตัวอย่างแบบเต็ม

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

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>

ไปลองเล่นได้ที่ https://vuejs.org/tutorial/#step-3