VueJS - प्रतिपादन
इस अध्याय में, हम सशर्त प्रतिपादन और सूची प्रतिपादन के बारे में जानेंगे। सशर्त प्रतिपादन में, हम यदि, यदि-और, अगर-और-अगर, शो, आदि का उपयोग करने के बारे में चर्चा करेंगे, तो सूची प्रतिपादन में, हम चर्चा करेंगे कि लूप का उपयोग कैसे करें।
सशर्त प्रतिपादन
आइए आरंभ करें और सशर्त प्रतिपादन के विवरणों को समझाने के लिए पहले एक उदाहरण पर काम करें। सशर्त प्रतिपादन के साथ, हम केवल तभी उत्पादन करना चाहते हैं जब शर्त पूरी हो जाती है और सशर्त जांच की मदद से किया जाता है यदि, अगर-और, अगर-और-अगर, शो, आदि।
v-अगर
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>Output
उपरोक्त उदाहरण में, हमने संदेश के साथ एक बटन और दो h1 टैग बनाए हैं।
शो नामक एक वैरिएबल घोषित किया गया है और एक मूल्य के लिए इनिशियलाइज़ किया गया है। यह बटन के करीब प्रदर्शित होता है। बटन के क्लिक पर, हम एक विधि कह रहे हैंshowdata, जो चर शो के मूल्य को बढ़ाता है। इसका मतलब है बटन पर क्लिक करने पर, वैरिएबल शो का मूल्य सही से गलत और झूठ से सच में बदल जाएगा।
हमने असाइन किया है यदि h1 टैग निम्न कोड स्निपेट में दिखाया गया है।
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>अब यह क्या है, यह चर शो के मूल्य की जांच करेगा और यदि इसका असली h1 टैग प्रदर्शित किया जाएगा। ब्राउज़र में बटन और दृश्य पर क्लिक करें, क्योंकि शो चर का मान गलत में बदल जाता है, ब्राउज़र में h1 टैग प्रदर्शित नहीं होता है। यह केवल तब दिखाया जाता है जब शो चर सत्य होता है।
ब्राउज़र में निम्न प्रदर्शन है।
यदि हम ब्राउज़र में जाँच करते हैं, तो यह वही है जो हमें तब मिलता है जब शो झूठा होता है।
H1 टैग को DOM से तब हटा दिया जाता है जब वेरिएबल शो को गलत पर सेट किया जाता है।
यह वह है जो हम देखते हैं जब चर सत्य है। H1 टैग को DOM शो में सेट होने पर वापस DOM में जोड़ा जाता है।
v-बाकी
निम्नलिखित उदाहरण में, हमने दूसरे h1 टैग में v- और जोड़ दिया है।
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>v- और निम्नलिखित कोड स्निपेट का उपयोग करके जोड़ा जाता है।
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>अब, अगर शो सच है “This is h1 tag” प्रदर्शित किया जाएगा, और यदि गलत है “This is h2 tag”प्रदर्शित किया जाएगा। यह वह है जो हमें ब्राउज़र में मिलेगा।
उपरोक्त प्रदर्शन तब होता है जब शो चर सत्य होता है। चूंकि, हमने v- और जोड़ दिया है, दूसरा कथन मौजूद नहीं है। अब, जब हम बटन पर क्लिक करते हैं, तो शो चर गलत हो जाएगा और दूसरा विवरण निम्न स्क्रीनशॉट में दिखाया गया है।
वी शो
v- शो, v-if जैसा ही व्यवहार करता है। यह इसके द्वारा सौंपी गई स्थिति के आधार पर तत्वों को दिखाता और छिपाता भी है। V-if और v-show के बीच का अंतर यह है कि v-if अगर हालत गलत है, तो DOM से HTML एलिमेंट हटाता है, और कंडीशन सही होने पर इसे वापस जोड़ता है। जबकि v- शो तत्व को छुपाता है, अगर स्थिति प्रदर्शन से झूठी है: कोई नहीं। यह तत्व को वापस दिखाता है, यदि स्थिति सत्य है। इस प्रकार, तत्व हमेशा डोम में मौजूद होता है।
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
<div v-show = "show">
<b>V-Show:</b>
<img src = "images/img.jpg" width = "100" height = "100" />
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>v-show निम्न कोड स्निपेट का उपयोग करके HTML तत्व को सौंपा गया है।
<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>हमने एक ही चर शो का उपयोग किया है और यह सच / गलत होने के आधार पर, छवि ब्राउज़र में प्रदर्शित होती है।
अब, चूंकि चर शो सच है, छवि ऊपर के स्क्रीनशॉट में प्रदर्शित होती है। हमें बटन पर क्लिक करें और प्रदर्शन देखें।
चर शो गलत है, इसलिए छवि छिपी हुई है। यदि हम तत्व का निरीक्षण करते हैं और देखते हैं, तो छवि के साथ div अभी भी DOM का एक हिस्सा है जिसमें शैली गुण प्रदर्शित होता है: उपरोक्त स्क्रीनशॉट में कोई भी नहीं देखा गया है।
सूची प्रस्तुत करना
v-के लिए
आइए अब सूची प्रतिपादन पर चर्चा करते हैं v- निर्देश के लिए।
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>एक आइटम नामक एक चर के रूप में घोषित किया जाता है। तरीकों में, एक विधि कहा जाता हैshowinputvalue, जिसे फलों के नाम लेने वाले इनपुट बॉक्स को सौंपा गया है। विधि में, टेक्स्टबॉक्स के अंदर दर्ज किए गए फलों को कोड के निम्नलिखित टुकड़े का उपयोग करके सरणी में जोड़ा जाता है।
showinputvalue : function(event) {
this.items.push(event.target.value);
}हमने निम्नलिखित कोड के रूप में दर्ज किए गए फलों को प्रदर्शित करने के लिए वी-फॉर का उपयोग किया है। V- के लिए सरणी में मौजूद मानों को पुनरावृत्त करने में मदद करता है।
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>लूप के साथ सरणी पर पुनरावृति करने के लिए, हमें v- के लिए = "एक आइटम में" का उपयोग करना होगा जहां सरणी में मान रखता है और तब तक प्रदर्शित करेगा जब तक कि सभी आइटम नहीं हो जाते।
Output
ब्राउज़र में आउटपुट निम्न है।
वस्तुओं का निरीक्षण करने पर, यह ब्राउज़र में दिखाया गया है। DOM में, हम li तत्व के लिए किसी भी v-for directive को नहीं देखते हैं। यह बिना किसी VueJS निर्देशों के DOM प्रदर्शित करता है।
यदि हम सरणी के सूचकांक को प्रदर्शित करना चाहते हैं, तो यह निम्नलिखित कोड का उपयोग करके किया जाता है।
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>सूचकांक प्राप्त करने के लिए, हमने ब्रैकेट में एक और चर जोड़ा है जैसा कि निम्नलिखित कोड में दिखाया गया है।
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>इन (ए, इंडेक्स), a मूल्य है और indexक्या चाबी है। ब्राउज़र डिस्प्ले अब निम्न स्क्रीनशॉट में दिखाया जाएगा। इस प्रकार, सूचकांक की सहायता से किसी भी विशिष्ट मान को प्रदर्शित किया जा सकता है।
