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

   อัปเดตล่าสุด Feb. 14, 2024

คำสั่ง 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  เพื่อให้เสิร์ชเอนจินค้นหาเว็บเพจของเราได้ดียิ่งขึ้น




คอร์สเรียนแนะนำ