Vue.js सशर्त रेंडरिंग

Vue.js में कंडीशनल रेंडरिंग आपको कुछ शर्तों के आधार पर तत्वों को गतिशील रूप से प्रदर्शित या छिपाने की अनुमति देता है। यह सुविधा उत्तरदायी और इंटरैक्टिव उपयोगकर्ता इंटरफ़ेस बनाने के लिए आवश्यक है। Vue.js कंडीशनल रेंडरिंग को संभालने के लिए कई निर्देश प्रदान करता है, जिससे आप अपने एप्लिकेशन में तत्वों की दृश्यता को कुशलतापूर्वक प्रबंधित कर सकते हैं।

v-if निर्देश

v-if निर्देश का उपयोग किसी अभिव्यक्ति की सत्यता के आधार पर तत्वों को सशर्त रूप से रेंडर करने के लिए किया जाता है। यदि अभिव्यक्ति का मूल्यांकन true होता है, तो तत्व रेंडर किया जाता है; अन्यथा, इसे DOM में शामिल नहीं किया जाता है। यहाँ एक बुनियादी उदाहरण दिया गया है:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

इस उदाहरण में, पैराग्राफ़ तत्व केवल तभी रेंडर किया जाता है जब isVisibletrue हो। बटन पर क्लिक करने से isVisible का मान टॉगल हो जाता है और इस प्रकार पैराग्राफ़ की दृश्यता नियंत्रित होती है।

v-else निर्देश

v-else निर्देश का उपयोग v-if के साथ संयोजन में किया जा सकता है ताकि v-if स्थिति false होने पर प्रदर्शित करने के लिए सामग्री का वैकल्पिक ब्लॉक निर्दिष्ट किया जा सके। यहाँ एक उदाहरण दिया गया है:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

इस उदाहरण में, जब isVisibletrue होता है, तो पहला पैराग्राफ़ प्रदर्शित होता है। जब isVisiblefalse होता है, तो इसके बजाय दूसरा पैराग्राफ़ दिखाया जाता है।

वी-शो निर्देश

v-show निर्देश आपको तत्वों को सशर्त रूप से प्रस्तुत करने की भी अनुमति देता है, लेकिन यह v-if से अलग है क्योंकि यह DOM से जोड़ने या हटाने के बजाय CSS display प्रॉपर्टी का उपयोग करके तत्व की दृश्यता को टॉगल करता है। यदि आपको किसी तत्व की दृश्यता को बार-बार टॉगल करने की आवश्यकता है तो यह अधिक कुशल हो सकता है।

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

इस उदाहरण में, v-show निर्देश पैराग्राफ़ की दृश्यता को उसके display गुण को सेट करके नियंत्रित करता है। तत्व DOM में रहता है लेकिन isVisible मान के आधार पर छिपा या दिखाया जाता है।

v-else-if निर्देश

v-else-if निर्देश का उपयोग आपके सशर्त रेंडरिंग तर्क में "else if" श्रृंखला बनाने के लिए किया जाता है। यह आपको यह मूल्यांकन करने के लिए अतिरिक्त शर्तें निर्दिष्ट करने की अनुमति देता है कि क्या पिछली v-if शर्त पूरी नहीं हुई है। यहाँ एक उदाहरण दिया गया है:

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

इस उदाहरण में, प्रदर्शित सामग्री status प्रॉपर्टी के मान पर निर्भर करती है। v-if, v-else-if, और v-else निर्देशों का उपयोग विभिन्न स्थितियों को संभालने के लिए किया जाता है।

निष्कर्ष

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