ทั้งสองเงื่อนไขแสดงองค์ประกอบ แต่ทำแตกต่างกัน — v-if เพิ่ม/ลบองค์ประกอบจาก DOM; v-show เก็บไว้ใน DOM และสลับ CSS display ของมัน
<template>
<p v-if="isVisible">Rendered only when true (removed from DOM when false)</p>
<p v-show="isVisible">Always in the DOM; just display:none when false</p>
</template>
<!-- v-if="false" → the element doesn't exist at all -->
<!-- (nothing in the DOM) -->
<!-- v-show="false" → the element exists but is hidden -->
<p style="display: none">...</p>
v-if มีต้นทุน สลับ สูง (สร้าง/ลบองค์ประกอบและส่วนประกอบของมัน เรียกใช้ lifecycle hooks ทุกครั้ง) แต่ต้นทุน ศูนย์ เมื่อเงื่อนไขเป็น false (ไม่มีอะไรแสดงผล)v-show มีต้นทุน เริ่มต้น สูง (แสดงผลเสมอ แม้ว่าจะซ่อน) แต่สลับราคาถูก (เพียงแค่เปลี่ยนแปลง CSS)Toggles often (tabs, dropdowns) → v-show (cheap to flip)
Rarely changes / may never render → v-if (skip rendering entirely)
Expensive content rarely shown → v-if (don't pay to build it)
<template>
<p v-if="status === 'loading'">Loading...</p>
<p v-else-if="status === 'error'">Error!</p>
<p v-else>Done</p>
</template>
v-if รองรับ v-else-if/v-else chains; v-show ไม่ (เพียงแค่สลับองค์ประกอบเดียว)
v-show ไม่ทำงานกับ <template> wrappers (ไม่มีองค์ประกอบที่จะตั้ง display); v-if ทำ
การเลือกองค์ประกอบที่ถูกต้องเป็นการตัดสินใจเกี่ยวกับประสิทธิภาพที่แท้จริง: v-show สำหรับสิ่งที่สลับบ่อยครั้ง (DOM ยังคงอยู่ การสลับราคาถูก) v-if สำหรับสิ่งที่มีเงื่อนไข/หาได้ยาก หรือมีราคาแพง (อย่าแสดงผลจนกว่าจะต้องใช้)
การเลือกผิด — เช่น v-show ในเนื้อหาหนักที่โดยปกติจะซ่อน — เสียความพยายามในการแสดงผล