Vue.js में कंडीशनल रेंडरिंग कैसे लागू करें

Vue.js एक लोकप्रिय जावास्क्रिप्ट ढांचा है जो गतिशील वेब एप्लिकेशन बनाना आसान बनाता है। Vue.js डेटा और घटनाओं के आधार पर सामग्री प्रस्तुत कर सकता है। यह उत्तरदायी और इंटरैक्टिव यूजर इंटरफेस बनाने के लिए विशेष रूप से उपयोगी है।

जानें कि Vue निर्देश क्या हैं और Vue.js में सशर्त प्रतिपादन प्राप्त करने के लिए उनका उपयोग कैसे करें।

Vue निर्देश क्या हैं?

Vue निर्देश आपको अद्वितीय विशेषताओं को जोड़कर Vue.js टेम्प्लेट में HTML तत्वों के व्यवहार को बढ़ाने की अनुमति देते हैं।

निर्देश Vue.js का एक मूलभूत हिस्सा हैं और हेरफेर करने के लिए एक सरल और शक्तिशाली तरीका प्रदान करते हैं दस्तावेज़ ऑब्जेक्ट मॉडल (DOM), तत्वों में गतिशील व्यवहार जोड़ें और डेटा प्रबंधित करें।

इसके अतिरिक्त, Vue.js आपको कस्टम निर्देश बनाने की अनुमति देता है, जिससे आप आसानी से Vue ऐप्स के लिए पुन: प्रयोज्य कार्य बना सकते हैं।

Vue फ्रेमवर्क इसके निर्देशों के साथ उपसर्ग करता है "वी-" निर्देश के नाम से पहले। Vue में आमतौर पर उपयोग किए जाने वाले निर्देशों के उदाहरणों में शामिल हैं वि पर, वि बाँध, वी-के लिए, और वि-अगर.

सशर्त प्रतिपादन क्या है?

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

Vue.js में, आप निर्देशों का उपयोग कर सकते हैं जैसे वि-अगर और वि दिखाएँ अपने आवेदन में सशर्त प्रतिपादन प्राप्त करने के लिए, आप कैसे करेंगे उससे अलग सामग्री को सशर्त रूप से React.js में प्रस्तुत करें।

वी-अगर निर्देश के साथ सशर्त प्रतिपादन प्राप्त करना

के समान जावास्क्रिप्ट यदि नहीं तो कथन, द वि-अगर Vue.js में निर्देश एक शर्त रखता है। यदि यह संतुष्ट नहीं है, तो Vue.js में निर्दिष्ट निम्न स्थिति का मूल्यांकन करता है वि-बाकी निर्देश देता है और ऐसा करना तब तक जारी रखता है जब तक कि वह या तो किसी शर्त को पूरा नहीं कर लेता या सभी शर्तों का मूल्यांकन नहीं कर लेता।

यह निर्देश आपको बूलियन मान के आधार पर एक तत्व को सशर्त रूप से प्रस्तुत करने की अनुमति देता है। यदि इसका मान गलत है तो Vue.js कंपाइलर भाग को रेंडर नहीं करेगा।

यहां सामग्री को सशर्त रूप से प्रस्तुत करने का एक उदाहरण दिया गया है वि-अगर:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>दस्तावेज़शीर्षक>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">
<एच 1वि-अगर='असत्य' >{{संदेश1}}एच 1>
<एच 1वि-बाकी >{{संदेश2}}एच 1>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े () {
 वापस करना {
 संदेश 1: 'यह आपका वीयू ऐप है।',
 संदेश 2: 'अभी तक एक वू ऐप नहीं है।'
 }
 }
 })
 ऐप.माउंट ('#ऐप')
लिखी हुई कहानी>
शरीर>
एचटीएमएल>

ऊपर दिया गया कोड ब्लॉक एक जोड़कर बनाए गए Vue ऐप को दर्शाता है सामग्री वितरण नेटवर्क (सीडीएन) आपकी HTML फ़ाइल की बॉडी से लिंक करें। v-if निर्देश h1 तत्व को केवल तभी प्रस्तुत करेगा जब उसकी स्थिति सत्य हो।

Vue ऐप्स में, ऐसी स्थितियाँ होती हैं जहाँ आपको विशिष्ट गतिशील मानदंडों के आधार पर एक घटक को रेंडर करने की आवश्यकता होती है। यह परिदृश्यों में उपयोगी होता है जैसे कि सूचना केवल तभी प्रदर्शित होती है जब कोई उपयोगकर्ता किसी बटन पर क्लिक करता है या एक एपीआई से डेटा लोड होने पर लोडिंग संकेतक दिखाता है।

उदाहरण के लिए:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>वीयू ऐपशीर्षक>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">
<डिववि-अगर="शोयूजर्स">
<उल>
<ली>User 1ली>
<ली>User 2ली>
उल>
डिव>
<बटनवी-ऑन: क्लिक करें="टॉगलशोयूजर्स ()">
 उपयोगकर्ताओं को टॉगल करें
बटन>
<एच 1>{{ संदेश }}एच 1>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े () {
 वापस करना {
 उपयोगकर्ता दिखाएं: सच,
 संदेश: 'यह आपका Vue ऐप है।'
 }
 },
 तरीके: {
 टॉगलशोयूजर्स () {
 this.showUsers = !this.showUsers
 }
 }
 })
 ऐप.माउंट ('#ऐप')
लिखी हुई कहानी>
शरीर>
एचटीएमएल>

उपरोक्त कोड ब्लॉक का उपयोग करता है वि-अगर बूलियन चर के मूल्य के आधार पर सामग्री को सशर्त रूप से प्रस्तुत करने का निर्देश, showUsers.

डिव यदि मान है तो तत्व प्रदर्शित होता है सत्य और यदि है तो छिपा हुआ है असत्य. क्लिक कर रहा है उपयोगकर्ताओं को टॉगल करें बटन ट्रिगर करता है टॉगल शो उपयोगकर्ता () मूल्य बदलने की विधि showUsers.

यह उदाहरण भी उपयोग करता है वि पर घटनाओं को सुनने का निर्देश, जैसे कि बटन पर एक क्लिक घटना। यह पुनर्मूल्यांकन करता है वि-अगर निर्देश जब भी का मूल्य showUsers परिवर्तन।

वी-शो निर्देश के साथ सशर्त प्रतिपादन प्राप्त करना

वि दिखाएँ निर्देश सशर्त रूप से Vue.js में तत्वों को दिखाने या छिपाने का एक और तरीका है। यह के समान है वि-अगर इसमें निर्देश है कि यह बूलियन अभिव्यक्ति के आधार पर तत्वों को प्रस्तुत कर सकता है। हालांकि, दो निर्देशों के बीच कुछ महत्वपूर्ण अंतर हैं।

वि दिखाएँ जब व्यंजक असत्य का मूल्यांकन करता है, तो निर्देश DOM से तत्व को नहीं हटाता है। इसके बजाय, यह तत्व को टॉगल करने के लिए CSS का उपयोग करता है दिखाना संपत्ति के बीच कोई नहीं और इसका मूल मूल्य।

इसका मतलब है कि तत्व अभी भी DOM में मौजूद है, लेकिन जब एक्सप्रेशन गलत है तो यह दिखाई नहीं देता है।

यहाँ एक उदाहरण है:

<शरीर>
<डिवपहचान="अनुप्रयोग">
<डिववि-अगर="शोयूजर्स">
<उल>
<ली>User 1ली>
<ली>User 2ली>
उल>
डिव>
<बटनवी-ऑन: क्लिक करें="टॉगलशोयूजर्स ()">
 उपयोगकर्ताओं को टॉगल करें
बटन>
<एच 1वि दिखाएँ="शोयूजर्स">{{ संदेश }}एच 1>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े () {
 वापस करना {
 उपयोगकर्ता दिखाएं: सच,
 संदेश: 'ये Vue ऐप के उपयोगकर्ता हैं'
 }
 },
 तरीके: {
 टॉगलशोयूजर्स () {
 this.showUsers = !this.showUsers
 }
 }
 })
 ऐप.माउंट ('#ऐप')
लिखी हुई कहानी>
शरीर>

उपरोक्त कोड ब्लॉक का उपयोग करता है वि दिखाएँ एक संदेश प्रदर्शित करने का निर्देश, 'ये हैं Vue ऐप के यूजर्स जब भी आप टॉगल बटन पर क्लिक करते हैं।

वी-इफ और वी-शो के बीच चयन करना

उपयोग करने के बीच निर्णय लेते समय वि-अगर और वि दिखाएँ Vue.js में सशर्त रूप से तत्वों को दिखाने या छिपाने के निर्देश, विचार करने के लिए कुछ महत्वपूर्ण कारक हैं।

जब हालत शायद ही कभी बदलती है, का उपयोग कर वि-अगर निर्देश अच्छा है। यह है क्योंकि वि-अगर स्थिति के गलत होने पर तत्व को DOM से हटा देता है, जो इष्टतम प्रदर्शन को बाधित कर सकता है। कंडीशन के सही होने पर ही एलिमेंट को रेंडर किया जाता है और कंडीशन के फिर से गलत होने पर DOM से हटा दिया जाता है।

दूसरी ओर, यदि स्थिति बार-बार बदलने की संभावना है, तो इसका उपयोग करना बेहतर है वि दिखाएँ निर्देश, जो प्रदर्शन में सुधार करता है। यह है क्योंकि वि दिखाएँ तत्व को छुपाने या दिखाने के लिए CSS का उपयोग करता है CSS डिस्प्ले प्रॉपर्टी को कोई नहीं और ब्लॉक के बीच टॉगल करके, एलिमेंट को हमेशा DOM को रेंडर करके छोड़ता है।

आपके वीयू ऐप में कंडीशनल रेंडरिंग आसान हो गई

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