जानें कि सूचियों को रेंडर करने के लिए Vue के v-for निर्देश का उपयोग कैसे करें।

वेब विकास में सबसे आम कार्यों में से एक डेटा सूचियों का प्रतिपादन है। Vue की मदद से इसे हैंडल करता है वी-के लिए निर्देश। आप पता लगाएंगे कि वी-फॉर डायरेक्टिव क्या है, सूची से आइटम कैसे निकालें, और कुंजियों के साथ सूचियों को कैसे प्रस्तुत करें।

वी-फॉर डायरेक्टिव इन वीयू क्या है?

वी-के लिए निर्देश Vue के निर्देशों में से एक है जो आपको न्यूनतम जावास्क्रिप्ट कोड के साथ सूची प्रस्तुत करने की अनुमति देता है। वी-के लिए निर्देश for के समान काम करता है जावास्क्रिप्ट में लूप और सूची में आइटम प्रस्तुत करने के लिए सरणियों और वस्तुओं पर पुनरावृति कर सकता है।

उपयोग करने के लिए वी-के लिए निर्देश, एक सरणी प्रदान करें जिसमें आप पुनरावृति करना चाहते हैं आंकड़े की संपत्ति Vue में विकल्प वस्तु.

उदाहरण के लिए:

<खाका>
<उल>
<लीवी-के लिए="नामों में नाम">{{ नाम }}ली>
उल>
खाका>
<लिखी हुई कहानी>
निर्यात डिफ़ॉल्ट {
 आंकड़े() {
 वापस करना {
 नाम: ['जॉन', 'डो', 'जेम्स'],
 };
 },
};
लिखी हुई कहानी>

ऊपर दिया गया कोड ब्लॉक एक Vue ऐप का उदाहरण दिखाता है जो इसका उपयोग करता है वी-के लिए पर पुनरावृति करने का निर्देश नाम में प्रदान की गई सरणी आंकड़े संपत्ति।

instagram viewer

वी-के लिए दो भागों के साथ एक अभिव्यक्ति के लिए मान सेट है: पुनरावृति चर (नाम) और यह नाम सरणी वी-के लिए का संकेत। पुनरावृत्ति चर प्रत्येक को धारण करता है नाम में नाम सरणी और प्रदर्शित करता है नाम.

Vue एक नया बनाता है दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) प्रत्येक के लिए तत्व नाम में नाम सरणी और इसे वेब पेज पर प्रस्तुत करता है।

अगर नाम सरणी परिवर्तन (उदाहरण के लिए, एक नया नाम जोड़ा जाता है या एक पुराना हटा दिया जाता है), Vue स्वचालित रूप से वर्चुअल DOM को अपडेट करेगा और अपडेट किए गए डेटा को प्रतिबिंबित करने के लिए सूची को फिर से प्रस्तुत करेगा।

Vue किसी सूची में किसी तत्व का अनुक्रमणिका प्राप्त करने का एक तरीका भी प्रदान करता है।

<लीवी-के लिए="(नाम, अनुक्रमणिका) नामों में">{{नाम}} -- {{सूचकांक}}ली>

उपरोक्त कोड प्रत्येक के सूचकांक को प्रदर्शित करने के लिए सिंटैक्स को दर्शाता है नाम में नाम सरणी।

आप भी उपयोग कर सकते हैं वी-के लिए संख्याओं की एक श्रृंखला के माध्यम से लूप करने का निर्देश:

<लीवी-के लिए="10 में संख्या">व्यू अच्छा हैली>

उपरोक्त कोड पाठ के साथ एक सूची प्रस्तुत करेगा व्यू अच्छा है दस गुना। वी-के लिए निर्देश बार-बार डेटा प्रदर्शित करने या एक ऑपरेशन करने के लिए संख्याओं की एक श्रृंखला के माध्यम से लूप कर सकता है। इस मामले में, अंक पुनरावृत्ति चर का उपयोग सूची में वर्तमान आइटम तक पहुँचने के लिए किया जाता है।

Vue में सूची से आइटम कैसे निकालें

आप उपयोगकर्ताओं को अपने वेब ऐप में सूचियों से आइटम निकालने की अनुमति दे सकते हैं। टू-डू सूची जैसे ऐप्स बनाते समय यह सुविधा उपयोगी होती है।

आप उपयोग कर सकते हैं ब्याह जावास्क्रिप्ट विधि (यह एक तरीका है सरणियों से आइटम निकालना) Vue में किसी सूची से किसी आइटम को निकालने के लिए।

array.splice (StartIndex, numToRemove, newElements)

ब्याह विधि किसी सरणी से आइटम जोड़ या निकाल सकती है। ब्याह विधि निम्न क्रम में पैरामीटर लेती है:

  1. startIndex पैरामीटर उस इंडेक्स को सेट करता है जिस पर सरणी को संशोधित करना शुरू करना है।
  2. numToRemove उन आइटम्स की संख्या इंगित करता है जिन्हें आप सरणी से निकालना चाहते हैं।
  3. अंततः newElements पैरामीटर, जिसका उपयोग आप सरणी में तत्व जोड़ने के लिए कर सकते हैं। यदि कोई तत्व निर्दिष्ट नहीं हैं, ब्याह () केवल सरणी से तत्वों को हटा देगा।

Vue में किसी सूची से किसी आइटम को निकालने के लिए ब्याह विधि का उपयोग करने के लिए, आपको उस आइटम की अनुक्रमणिका जानने की आवश्यकता है। इसे प्राप्त करने का एक तरीका पास करना है अनुक्रमणिका एक विधि के तर्क के रूप में जो आइटम को हटाने को संभालती है।

उदाहरण के लिए, आप सरणी में प्रत्येक नाम के आगे एक बटन जोड़ सकते हैं जो उपयोगकर्ता द्वारा उस पर क्लिक करने पर आइटम को निकालने के लिए एक विधि ट्रिगर करता है:

<खाका>
<उल>
<लीवी-के लिए="(नाम, अनुक्रमणिका) नामों में">
 {{नाम}} -- {{सूचकांक}}
<बटन @क्लिक="निकालेंआइटम (अनुक्रमणिका)">निकालनाबटन>
ली>
उल>
खाका>

अनुक्रमणिका पैरामीटर हमें प्रत्येक के सूचकांक तक पहुंच प्रदान करता है नाम सरणी में, जिसे यह प्रोग्राम तर्क के रूप में पास करता है वस्तु निकालें तरीका। वस्तु निकालें विधि का उपयोग कर सकते हैं ब्याह ए को दूर करने की विधि नाम से नाम सरणी:

<लिखी हुई कहानी>
निर्यात डिफ़ॉल्ट {
 आंकड़े() {
 वापस करना {
 नाम: ['जॉन', 'डो', 'जेम्स'],
 };
 },
 तरीके: {
 रिमूवआइटम (इंडेक्स) {
 this.names.splice (सूचकांक, 1);
 }
}
};
लिखी हुई कहानी>

उपरोक्त स्क्रिप्ट का उपयोग करता है ब्याह प्रदान की गई नामों की सूची से एक नाम हटाने की विधि। यह अद्यतन सरणी को प्रतिबिंबित करने के लिए यूआई में सूची को स्वचालित रूप से अपडेट करेगा।

Vue में कुंजियों के साथ सूचियाँ कैसे प्रस्तुत करें

चाबी विशेषता एक अद्वितीय विशेषता है जिसका उपयोग सूची में प्रत्येक आइटम की पहचान को ट्रैक करने के लिए Vue करता है। जब सूची में कोई आइटम बदलता है, तो इसकी मदद से चाबी विशेषता Vue पूरी सूची को फिर से प्रस्तुत किए बिना DOM को जल्दी से अपडेट कर सकता है।

आइए Vue में कुंजियों के साथ सूची प्रस्तुत करने का एक उदाहरण देखें:

<खाका>
<डिव>
<उल>
<लीवी-के लिए="नामों में नाम":चाबी="नाम.आईडी">
 {{ नाम नाम }}
<बटन @क्लिक="removeItem (name.id)">निकालनाबटन>
ली>
उल>
डिव>
खाका>
<लिखी हुई कहानी>
निर्यात डिफ़ॉल्ट {
 आंकड़े() {
 वापस करना {
 नाम: [
 {आईडी: 1, नाम: "जॉन"},
 {आईडी: 2, नाम: "डो"},
 {आईडी: 3, नाम: "जेम्स"},
 ],
 };
 },
 तरीके: {
 निकालेंआइटम (कुंजी) {
 this.names.splice (कुंजी - 1, 1);
 },
 },
};
लिखी हुई कहानी>

इस उदाहरण में, आपके पास अद्वितीय वस्तुओं की एक सूची है पहचान गुण। कोड ब्लॉक का उपयोग करता है चाबी विशेषता के साथ वी-के लिए सूची में प्रत्येक आइटम की पहचान को ट्रैक करने का निर्देश। सूची बदलने पर यह Vue को DOM को कुशलतापूर्वक अपडेट करने की अनुमति देता है।

यदि आप सूची से किसी आइटम को हटाना चाहते हैं, तो Vue पूरी सूची को फिर से रेंडर किए बिना DOM को अपडेट कर देगा। ऐसा इसलिए है क्योंकि Vue सूची में प्रत्येक आइटम की पहचान रखता है और केवल वे आइटम अपडेट कर सकता है जो बदल गए हैं।

चाबी सूची में प्रत्येक आइटम के लिए विशेषता एक विशिष्ट पहचानकर्ता होनी चाहिए। यह एक हो सकता है पहचान संपत्ति या कोई अन्य अद्वितीय पहचानकर्ता जिसका उपयोग आइटम को ट्रैक करने के लिए किया जा सकता है।

का उपयोग चाबी विशेषता के साथ वी-के लिए निर्देश मुद्दों को प्रस्तुत करने से बचने में मदद करता है। उदाहरण के लिए, नामों को हटाते समय, Vue उपयोग करता है चाबी सूची में वस्तुओं के क्रम को बनाए रखने के लिए विशेषता।

Vue निर्देश आवश्यक हैं

यहाँ, आपने Vue में रेंडरिंग सूचियों की मूल बातें शामिल कीं, जिसमें सूचियों से आइटम निकालना और कुंजियों के साथ सूची रेंडर करना शामिल है। आप इन अवधारणाओं को समझकर जटिल डेटा सूचियों को संभालने वाले उत्तरदायी इंटरफेस बना सकते हैं।

Vue में विभिन्न उद्देश्यों के लिए ढेर सारे निर्देश हैं, जिनमें कंडीशनल रेंडरिंग, इवेंट बाइंडिंग और डेटा बाइंडिंग शामिल हैं। इन निर्देशों को समझने से आपको कुशल इंटरैक्टिव वेब ऐप बनाने में मदद मिल सकती है।