อัปเดตล่าสุด Feb. 14, 2024
คำสั่ง v-if ใน Vue 3 เป็นคำสั่งพื้นฐานแต่มีประสิทธิภาพ ใช้งานง่าย ช่วยในการควบคุมการแสดงของ Component ได้ตามเงื่อนไข ในบทนี้จะเป็นการแนะนำการใช้งานเบื้องต้น เทคนิคขั้นสูง และแนวทางปฏิบัติที่ดีสำหรับ 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
โดยพร่ำเพรื่อv-show
แทน v-if
เพื่อให้เสิร์ชเอนจินค้นหาเว็บเพจของเราได้ดียิ่งขึ้น