Vue.js เริ่มต้น ตอน8 (Conditional Rendering v-if)

สวัสดีครับ ตอนนี้เป็นตอนที่8 แล้วนะครับ จะเกี่ยวข้องกับ Conditional Rendering ซึ่งก็คือการใช้ if else นั่นเอง โดย Vue ก็ออกแบบมาให้เราใช้งานได้ง่ายครับ โดยเราสามารถใส่ if else ใน Attribute ได้เลย มาดูกันครับว่า Vue ทําอะไรได้บ้าง

v-if

เราสามารถใช้ v-if ได้เลยตามนี้ครับ

โดยที่ภายในจะเป็น Condition ของเราตามต้องการครับ

ตัวอย่าง

นอกเหนือจากนี้เราสามารถใช้ v-if กับ template ได้ด้วยดังนี้

v-else และ v-else-if

เราสามารถใช้ v-else หรือ v-else-if แบบนี้ได้ครับ

การใช้งาน v-else และ v-else-if จะต้องเขียนติดกันนะครับ

Controlling Reusable Elements with key

ในกรณีที่เราใช้ v-if v-else หรือ v-else-if กับ component บางอย่างที่เป็นชนิดเดียวกัน Vue จะพยายามใช้ของเดิมเพื่อให้แสดงผลได้เร็วที่สุด อาจจะทําให้เกิดปัญหาขึ้นได้ดังตัวอย่างนี้

เมื่อมีการเปลี่ยนประเภทของการ login ข้อมูลใน input จะไม่เปลี่ยน

วิธีแก้ปัญหาคือ การใช้ Key ตามตัวอย่างนี้ครับ

v-show

นอกจาก v-if Vue ยังมีอีกทางเลือกคือ v-show การใช้งานก็เหมือนกันครับ

ความแตกต่างระหว่าง v-if และ v-show คือ v-show จะยังคง Code html อยู่แต่ไป set css ให้ show หรือ hide เท่านั้น ส่วน v-if ไม่มี Code html อยุ่เลย

v-show ไม่สามารถใช้กับ template ได้ครับ

สรุปคือเราสามารถจัดการ การแสดงผลใน Vue ได้อย่างง่าย โดยใช้ v-if หรือ v-show โดยส่วนใหญ่แล้วเราจะใช้ v-if มากกว่าครับ แล้วพบกันบทความหน้านะครับ

Comments