Vue में स्थिति के आधार पर प्रदर्शन

अगली डायरेक्टिव जिसे हम पढ़ेंगे, उसे कहते हैं v-if। इसकी मदद से एलिमेंट्स को दिखाया या छुपाया जा सकता है। यह डायरेक्टिव कैसे काम करती है: यह पैरामीटर के रूप में data ऑब्जेक्ट की कोई भी प्रॉपर्टी लेती है। यदि इस प्रॉपर्टी का मान true है - तो एलिमेंट दिखाई देगा, और यदि false है - तो छुप जाएगा।

आइए एक उदाहरण पर नजर डालें। मान लीजिए कि हमारे पास v-if एट्रिब्यूट वाला एक पैराग्राफ है। इस एट्रिब्यूट का मान मान लीजिए कि visible प्रॉपर्टी है, ऐसे:

App.vue<template>
  <p v-if="visible">text</p>
</template>

आइए हमारी प्रॉपर्टी का मान true पर सेट करें। इस स्थिति में पैराग्राफ दिखाई देगा:

javascriptdata() {
  return {
    visible: true,
  }
}

और यदि visible का मान false पर सेट कर दें, तो पैराग्राफ छुप जाएगा:

javascriptdata() {
  return {
    visible: false,
  }
}