Vue.js เริ่มต้น ตอน7 (Class and Style Bindings)

ในตอนที่ 7 นี้จะเกี่ยวกับเรื่อง Class and Style Bindings ใน vue.js ครับ ในการจัดการ Class และ Style เราสามารถใช้ v-bind ได้ เพื่อให้เราสามารถใส่ Logic หรือ ตัวแปรลงไปได้ ทําให้เราสามารถทํา Class  และ Style แบบ Dinamic ได้ง่ายขึ้น

เรามาดูวิธีการใช้งานในรูปแบบต่างๆ โดยผมจะแยกเป็นสองส่วนครับคือ Binding HTML Classes และ Binding Inline Styles ดังนี้ครับ

Binding HTML Classes

Object Syntax

คุณสามารถส่งค่า Object ให้กับ Class ได้ตามตัวอย่างนี้

จากตัวอย่าง isActive เป็นตัวแปรที่เราเก็บค่า true หรือ false ไว้เพื่อ Control class ของ div นี้ได้ตามต้องการ

นอกจากนี้เราสามารถใช้ v-bind:class ร่วมกับ Attribute class ปกติได้ ในกรณีที่เราต้องการควบคุม Class เพิ่มเติมนอกเหนือจาก Class เดิมที่มีอยู่ ตัวอย่าง

isActive, hasError เป็นตัวแปรที่เราสามารถควบคุมได้ตามต้องการ

มาดูตัวอย่างการทําไปใช้งานจริงกันครับ

html:

Array Syntax

เราสามารถส่ง Array เข้าไปใน v-bind:class ได้ ดังนี้

js:

html:

เมื่อ Render ออกมาแล้วจะได้ออกมาแบบนี้ครับ

หรือ เราสามารถเพิ่ม Condition เข้าไปได้แบบนี้

With Components

ในกรณีที่เราใส่ Class ให้กับ Component ที่เราสร้างขึ้นมาเอง Class ที่เรากําหนดนั้นจะถูกกําหนดให้กับ Class ของ Root ด้วย ตัวอย่าง

ถ้าเรามี Component ชื่อ my-component โดยมีเนื้อหาดังนี้

แล้วเรานํา Component ไปใช้งานโดยกําหนด Class ให้กับ Component นั้นด้วย

เมื่อ Render ออกมาแล้วจะได้แบบนี้ครับ

Binding Inline Styles

Object Syntax

เราสามารถส่ง Styles ให้กับ HTML ได้ซึ่งก็จะ คล้ายๆกับ Class โดยใช้ v-bind:style แล้วส่ง Object ของ style ที่เราต้องการเข้าไป ตัวอย่าง

ตัวอย่าง data:

หรือเราสามารถทําแบบนี้ได้ครับ

สร้าง Data ที่เป็น Object ก็ได้ครับ

Array Syntax

ถ้าต้องการใช้ Style หลาย Style ก็สามารถส่งเป็น Array เข้าไปได้ดังนี้

Auto-prefixing

กรณีที่ Style ต้องการใช้  vendor prefixes ใน v-bind:style Vue จะตรวจสอบและ เพิ่มให้โดยอัตโนมัติ

ถึงจุดนี้เราสามารถควบคุม Class และ Style ในแบบ Dinamic ได้อย่างง่ายดาย ด้วยการใช้ v-bind:class และ v-bind:style แล้วพบกันบทความหน้านะครับ สวัสดีครับ 🙂

Comments