Vue में जटिल शर्तें
v-if डायरेक्टिव में
अधिक जटिल शर्तें बनाई जा सकती हैं। उदाहरण के लिए,
num प्रॉपर्टी में
1, 2 या
3 नंबरों में से एक हो सकता है:
data() {
return {
num: 3, // मान लीजिए अभी वहाँ 3 है
}
}
अब आइए तीन पैराग्राफ बनाते हैं, जिनमें से
केवल एक ही दिखाई देगा
num प्रॉपर्टी के मान के आधार पर:
<template>
<p v-if="num === 1">one</p>
<p v-if="num === 2">two</p>
<p v-if="num === 3">three</p>
</template>
अधिक जटिल शर्तें भी बनाई जा सकती हैं:
<template>
<p v-if="num === 1 || num === 3">
one or two
</p>
</template>
day प्रॉपर्टी दी गई है, जिसमें
सप्ताह का वर्तमान दिन लिखा हुआ है। मान लीजिए आपके पास
सात पैराग्राफ हैं, जिनमें से प्रत्येक में
सप्ताह के दिन का नाम लिखा हुआ है। ऐसा करें कि स्क्रीन पर
केवल वही पैराग्राफ दिखाई दे
जिसमें वर्तमान दिन का नाम हो।
