การใช้งาน v-if

คำสั่ง v-if ใน Vue 3 เป็นคำสั่งพื้นฐานแต่มีประสิทธิภาพ ใช้งานง่าย ช่วยในการควบคุมการแสดงของ Component ได้ตามเงื่อนไข ในบทนี้จะเป็นการแนะนำการใช้งานเบื้องต้น เทคนิคขั้นสูง และแนวทางปฏิบัติที่ดีสำหรับ v-if กันครับ

การใช้งาน v-if 

<template>
  <div v-if="isLoggedIn">
    <p>ข้อความนี้จะแสดงเฉพาะผู้ใช้งานที่ล็อกอินแล้ว</p>
  </div>
</template>

<script setup>
let isLoggedIn = true;
</script>

เงื่อนไข (condition) ให้ประเมินเป็น  true  จากนั้น Component จะแสดงผล

เงื่อนไขเป็น  false  Component จะหายไป

1. การใช้ตัวดำเนินการ (Operator)

<div v-if="age >= 18"></div>
<div v-if="message !== ''"></div>

2. การผูกข้อมูลกับ props

<template>
  <div v-if="showDetails && user.age >= 21"></div>
</template>

<script setup>
props: {
  showDetails: Boolean,
  user: Object, // โครงสร้าง object ของ user
};
</script>

3. การใช้ฟังก์ชัน

<template>
  <div v-if="isUserActive()"></div>
</template>

<script setup>
const isUserActive = () => user.lastActive < Date.now() - 3600000; 
</script>

ข้อควรระวัง

• หลีกเลี่ยงการใช้  v-if  กับองค์ประกอบซับซ้อน เนื่องจากจะสร้างและลบองค์ประกอบนั้นใหม่ ส่งผลต่อประสิทธิภาพ
• พิจารณาใช้  v-show  สำหรับการซ่อน/แสดงที่รวดเร็ว ไม่เกี่ยวข้องกับตรรกะ

แนวทางปฏิบัติที่ดีสำหรับ v-if

• ตั้งชื่อเงื่อนไขให้สื่อความหมายที่ชัดเจน
• แยก logic ที่ซับซ้อนออกเป็นฟังก์ชันย่อย ๆ
• ทดสอบเงื่อนไขอย่างละเอียด
• ใช้คำสั่งอย่างเหมาะสม ไม่ใช้  v-if  โดยพร่ำเพรื่อ
• คำนึงถึง SEO ถ้า Component ที่สำคัญ ๆ ควรใช้  v-show  แทน  v-if  เพื่อให้เสิร์ชเอนจินค้นหาเว็บเพจของเราได้ดียิ่งขึ้น