Vue में स्थिति के आधार पर प्रदर्शन
अगली डायरेक्टिव जिसे हम पढ़ेंगे, उसे कहते हैं
v-if। इसकी मदद से एलिमेंट्स को
दिखाया या छुपाया जा सकता है। यह डायरेक्टिव
कैसे काम करती है: यह पैरामीटर के रूप में data ऑब्जेक्ट की कोई भी
प्रॉपर्टी लेती है। यदि इस प्रॉपर्टी
का मान true है - तो एलिमेंट
दिखाई देगा, और यदि false है - तो छुप जाएगा।
आइए एक उदाहरण पर नजर डालें।
मान लीजिए कि हमारे पास v-if एट्रिब्यूट वाला एक पैराग्राफ है।
इस एट्रिब्यूट का मान मान लीजिए कि visible प्रॉपर्टी
है, ऐसे:
<template>
<p v-if="visible">text</p>
</template>
आइए हमारी प्रॉपर्टी का मान
true पर सेट करें। इस स्थिति में
पैराग्राफ दिखाई देगा:
data() {
return {
visible: true,
}
}
और यदि visible का मान
false पर सेट कर दें, तो पैराग्राफ छुप जाएगा:
data() {
return {
visible: false,
}
}
मान लीजिए कि data में visible प्रॉपर्टी स्टोर है।
मान लीजिए कि आपके पास दो पैराग्राफ भी हैं। ऐसा करें
कि पहला पैराग्राफ स्क्रीन पर दिखाई दे,
यदि प्रॉपर्टी visible, true के बराबर है,
और दूसरा पैराग्राफ, इसके विपरीत, दिखाई दे, यदि प्रॉपर्टी
visible, false के बराबर है।
