दोन्ही घटक सशर्त प्रदर्शित करतात, परंतु ते अलग-अलग तरीके करतात — 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 मध्ये जास्त टॉगल खर्च आहे (घटक आणि त्यांचे घटक तयार/नष्ट करते, प्रत्येक वेळी जीवनचक्र हुक्स चालवते) परंतु जेव्हा अट 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 साखळीला समर्थन करते; v-show करत नाही (हे फक्त एक घटक टॉगल करते)।
v-show <template> रॅपर्स वर काम करत नाही (सेट करण्यासाठी कोणताही घटक नाही display); v-if करते।
योग्य निवड निवडणे ही एक वास्तविक कार्यक्षमता निर्णय आहे: v-show वारंवार टॉगल केलेल्या गोष्टीसाठी (DOM राहते, टॉगल स्वस्त आहे), v-if सशर्त/दुर्मिळ किंवा महागड्या गोष्टीसाठी (आवश्यकता येईपर्यंत त्यांना रेंडर करू नका)।
चूक निवड — उदाहरणार्थ, v-show भारी सामग्रीवर जे सामान्यत: लपलेले असते — रेंडरिंग कार्य वाया जाते।