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

v-if

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

<h1 v-if="true">Yes</h1>

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

<h1 v-if="Math.random() > 0.5">Yes</h1>

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

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else และ v-else-if

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

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

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

Controlling Reusable Elements with key

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

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

เมื่อมีการเปลี่ยนประเภทของการ login ข้อมูลใน input จะไม่เปลี่ยน วิธีแก้ปัญหาคือ การใช้ Key ตามตัวอย่างนี้ครับ

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show

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

<h1 v-show="true">Hello!</h1>

ความแตกต่างระหว่าง 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 มากกว่าครับ แล้วพบกันบทความหน้านะครับ