v-if, v-show, v-else और v-else-if के साथ Vue में कंडीशनल रेंडरिंग/डिस्प्ले

परिचय

Vue.js डायनामिक वेब इंटरफेस बनाने के लिए एक सरल वेब ऐप फ्रेमवर्क है और सिंगल-पेज ऐप्स (एसपीए). जब हम ये ऐप्स बनाते हैं, तो कई बार, हम चाहते हैं किसी विशेष मानदंड के आधार पर कुछ प्रस्तुत करना - यह सशर्त प्रतिपादन का सार है।

सशर्त प्रतिपादन एक शर्त सही है या नहीं, इस पर आधारित विशिष्ट यूजर इंटरफेस (यूआई) मार्कअप प्रस्तुत करने की क्षमता को संदर्भित करता है। इस धारणा का उपयोग अक्सर संदर्भों में किया जाता है जैसे कि घटकों को दिखाना या छिपाना (टॉगल करना), एप्लिकेशन की कार्यक्षमता को बदलना, प्रमाणीकरण और प्राधिकरण को संभालना, और बहुत कुछ।

इस लेख में, हम Vue.js में सशर्त रेंडरिंग के विभिन्न तरीकों को देखेंगे v-if, v-else-if, तथा v-else निर्देश। हम कुछ उदाहरणों पर भी एक नज़र डालेंगे और इनके बीच के अंतर को उजागर करेंगे v-if और v-show.

वी-अगर

RSI v-if निर्देश के लिए प्रयोग किया जाता है सशर्त रूप से एक ब्लॉक प्रस्तुत करें मतलब ब्लॉक के साथ v-if विशेषता केवल होगी उत्पादित यदि निर्देश की अभिव्यक्ति a . लौटाती है true मूल्य। यदि व्यंजक एक अमान्य परिणाम उत्पन्न करता है (उदाहरण के लिए, null, 0, खाली स्ट्रिंग, false), तत्व है हटाए गए डोम से।

आइए इस व्यवहार को व्यावहारिक उदाहरण पर स्पष्ट करें:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

जबसे login इसके लिए सेट है true, <div> ब्लॉक युक्त v-if निर्देश का उत्पादन किया जाएगा, इस प्रकार प्रदर्शित किया जाएगा।

वी-अगर vs वी शो

यह ध्यान देने योग्य है कि v-show ऊपर के उदाहरण में भी काम करेगा और समान रूप से कार्य करेगा, लेकिन दोनों के बीच एक अंतर है।

v-if सशर्त रूप से प्रस्तुत करता है एक तत्व, जबकि v-show सशर्त रूप से दिखाता/प्रदर्शित करता है तत्व।

इसका तात्पर्य है कि जब सशर्त टॉगल किया जाता है, v-if वास्तव में घटकों को हटा देगा और पुनर्स्थापित करेगा v-show बस उन्हें अदृश्य या दृश्यमान बनाता है। निम्नलिखित एनीमेशन दिखाता है कि कैसे: v-if वास्तव में कोड ब्लॉक को हटाता है और पुन: उत्पन्न करता है:

इस बीच, v-show डीओएम में तत्व को हमेशा बनाए रखेगा और इसकी उपस्थिति को टॉगल करने के लिए बस अपने सीएसएस को बदल देगा (इसकी सेटिंग करके) display सेवा मेरे none):

वी-और

RSI v-else निर्देश एक है v-if निर्देश जो आपको अनुकूलित करने की अनुमति देता है false सशर्त प्रतिपादन में मूल्य। अगर यह नहीं है true, आप उपयोग कर सकते हैं v-else इसके बजाय क्या होना चाहिए परिभाषित करने के लिए।

उदाहरण के लिए, मान लें कि हमारे पास पासवर्ड इनपुट है, और हम चाहते हैं कि यह एक त्रुटि संदेश उत्पन्न करे, "कमजोर पासवर्ड", अगर इनपुट की लंबाई 6 या डिस्प्ले से कम है "मज़बूत पारण शब्द" यदि लंबाई 6 से अधिक है।

यह एक सशर्त रेंडर है, जिसमें झूठे मामले को संभालने का विकल्प है:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

आइए इसका उपयोग एक साधारण लॉगिन पृष्ठ की सामग्री को टॉगल करने के लिए करें ताकि यह उपयोगकर्ता के लॉग इन होने या न होने के आधार पर संदेश को बदल दे। हम के आधार पर बटन शब्दों को संशोधित करेंगे userLoggedIn स्थिति भी:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

बटन का क्लिक ईवेंट टॉगल करेगा userLoggedIn डेटा आइटम, और यह नीचे दिखाए गए अनुसार प्रदर्शित डेटा को प्रभावित करेगा:

वी-और-अगर

v-else-if extends a v-if के साथ एक else...if खंड मैथा। यह जावास्क्रिप्ट के समान है else...if इसमें ब्लॉक करें कि यह हमें मौजूदा स्टेटमेंट में एक if स्टेटमेंट जोड़ने की अनुमति देता है v-if. इसका उपयोग तब किया जाता है जब जाँच करने के लिए कई मानदंड होते हैं और कई बार जंजीर में बांधा जा सकता है:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

निष्कर्ष

इस लेख में, हमने देखा है कि किसी तत्व को सशर्त रूप से कैसे प्रस्तुत किया जाए v-if, v-else, तथा v-else-if. हमने के बीच का अंतर भी समझाया v-if और v-show.

• कॉइनस्मार्ट। यूरोप का सर्वश्रेष्ठ बिटकॉइन और क्रिप्टो एक्सचेंज।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। नि: शुल्क प्रवेश।
• क्रिप्टोहॉक। Altcoin रडार। मुफ्त परीक्षण।
• स्रोत: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/