ใน Vue.js, คุณสามารถเพิ่มคลาส CSS ลงใน element โดยใช้ directive v-bind:class
หรือย่อมาเรียกว่า :class
หรือ v-bind:class
directive ช่วยให้คุณสามารถเปลี่ยนคลาสของ element ตามเงื่อนไขหรือตามค่าที่คุณต้องการได้ง่ายๆ ตัวอย่างเช่น:
1 | <template> |
ในตัวอย่างนี้เราใช้ :class
directive เพื่อกำหนดคลาสของ element <p>
โดยขึ้นอยู่กับค่าของ isActive
และ isError
ถ้า isActive
เป็น true
คลาส ‘active’ จะถูกเพิ่มลงไป และถ้า isError
เป็น true
คลาส ‘text-danger’ จะถูกเพิ่มลงไป เมื่อคลิกที่ปุ่ม “Toggle Class” ค่าของ isActive
และ isError
จะถูกสลับไปมา ซึ่งจะทำให้คลาสบน element <p>
ถูกเปลี่ยนแปลงตามค่าใหม่.