Conditional Rendering ใน Vue 3

Conditional Rendering คือการแสดง/ซ่อน element หรือ component ตามเงื่อนไขที่กำหนด

Vue 3 ให้ directive สำหรับการควบคุมการแสดงผล ได้แก่ v-if, v-else-if, v-else และ v-show

v-if / v-else-if / v-else

• ใช้สำหรับแสดง/ซ่อน element ตามเงื่อนไข
• ถ้าเงื่อนไขเป็น false จะไม่ render element นั้นใน DOM เลย

ตัวอย่าง

<template>
  <div v-if="isLoggedIn">Welcome!</div>
  <div v-else>กรุณาเข้าสู่ระบบ</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const isLoggedIn = ref(false);
</script>

v-show

• ใช้สำหรับแสดง/ซ่อน element เช่นกัน แต่จะ render element ใน DOM เสมอ เพียงแค่ซ่อนด้วย CSS (display: none)
• เหมาะกับกรณีที่ต้องสลับแสดง/ซ่อนบ่อย ๆ

ตัวอย่าง

<template>
  <div v-show="loading">Loading...</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const loading = ref(true);
</script>

เปรียบเทียบ v-if กับ v-show

| จุดเด่น | v-if | v-show | |||-| | Render DOM | ตามเงื่อนไข | Render เสมอ | | Performance | ดีถ้า toggle ไม่บ่อย | ดีถ้า toggle บ่อย | | ใช้กับ | เงื่อนไขสำคัญ, หนัก | ซ่อน/แสดงบ่อย ๆ |

ข้อควรระวังและแนวทางเลือกใช้

• ถ้า element ต้องถูกซ่อน/แสดงบ่อย ๆ ให้ใช้ v-show (ประหยัด performance)
• ถ้า element มีเงื่อนไขสำคัญ หรือ render หนัก ใช้ v-if (ไม่เปลือง DOM)
• ไม่ควรใช้ v-if และ v-for ใน element เดียวกัน (จะทำงานไม่ตรงตามที่คาด)
• สามารถใช้กับ component ได้เหมือนกับ element ปกติ