Vue में v-show डायरेक्टिव

सशर्त प्रदर्शन का एक और विकल्प डायरेक्टिव v-show है। इसका उपयोग बहुत समान तरीके से किया जाता है:

html<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 को प्राथमिकता दें, यदि स्थिति रनटाइम के दौरान नहीं बदल सकती है।