Vue में v-show डायरेक्टिव
सशर्त प्रदर्शन का एक और विकल्प
डायरेक्टिव v-show है।
इसका उपयोग बहुत समान तरीके से किया जाता है:
<template>
<p v-show="isAuth">
+++
</p>
</template>
अंतर यह है कि v-show वाला एलिमेंट हमेशा
रेंडर होगा और DOM में बना रहेगा, और केवल
इसके CSS प्रॉपर्टी display को
टॉगल किया जाएगा।
डायरेक्टिव v-if "असली"
सशर्त रेंडरिंग करती है, क्योंकि यह गारंटी देती है
कि इवेंट लिसनर्स और चाइल्ड कंपोनेंट्स
ब्लॉक के अंदर उचित रूप से नष्ट हो जाते हैं
और स्थिति के टॉगल होने पर पुनः बनाए जाते हैं।
डायरेक्टिव v-if आलसी भी है: यदि स्थिति
प्रारंभिक रेंडरिंग के समय गलत है,
तो यह कुछ नहीं करेगी - सशर्त ब्लॉक
तब तक रेंडर नहीं होगा
जब तक कि स्थिति सत्य न हो जाए।
तुलना के लिए, v-show बहुत सरल है - एलिमेंट
हमेशा रेंडर होता है, चाहे प्रारंभिक स्थिति कुछ भी हो,
CSS-आधारित टॉगलिंग के साथ।
सामान्य तौर पर, v-if की टॉगलिंग लागत अधिक होती है,
जबकि v-show की प्रारंभिक रेंडरिंग लागत अधिक होती है।
इसलिए v-show का उपयोग करें,
यदि टॉगलिंग अक्सर होनी है,
और v-if को प्राथमिकता दें, यदि स्थिति
रनटाइम के दौरान नहीं बदल सकती है।
डायरेक्टिव v-show का उपयोग template एलिमेंट पर
नहीं किया जा सकता है और यह v-else के साथ काम नहीं करती है।
एक पैराग्राफ और एक बटन दिया गया है। ऐसा करें, कि पैराग्राफ बटन दबाने पर टॉगल हो।
बताएं, कि डायरेक्टिव्स v-show और v-if
में क्या अंतर हैं।
बताएं, कि डायरेक्टिव v-show का उपयोग कब बेहतर है,
और कब - v-if का।
बताएं, कि डायरेक्टिव v-show की
क्या सीमाएँ हैं।
