एट्रिब्यूट और क्लास बाइंडिंग
एट्रिब्यूट, क्लास और स्टाइल को डायनेमिक रूप से बाइंड कीजिए
एट्रिब्यूट और क्लास बाइंडिंग, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 3 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
क्लास और स्टाइल बाइंड करना
अक्सर किसी तत्व की क्लास या स्टाइल को उसकी स्थिति के आधार पर बदलने की आवश्यकता होती है।
Vue में :class और :style के लिए विशेष सुविधा है, जिससे आप केवल स्ट्रिंग ही नहीं, बल्कि ऑब्जेक्ट और ऐरे भी दे सकते हैं।
:class का ऑब्जेक्ट सिंटैक्स
:class को एक ऑब्जेक्ट दें। कुंजियाँ क्लास के नाम होती हैं और सत्य मान वाली कुंजियाँ शामिल की जाती हैं।
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->स्थिर और डायनेमिक क्लास को मिलाना
स्थिर class एट्रिब्यूट और डायनेमिक :class एक साथ मिल जाते हैं।
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>:class का ऐरे सिंटैक्स
क्लास की सूची लागू करने के लिए एक ऐरे दें।
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->एरे में शर्तीय अभिव्यक्तियाँ
आप एरे के भीतर शर्तीय अभिव्यक्तियों को मिला सकते हैं।
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>इनलाइन स्टाइल बाइंड करना
:style निर्देश ऑब्जेक्ट का उपयोग करके इनलाइन स्टाइल को बाइंड करता है।
fontSize जैसे camelCase प्रॉपर्टी नामों का उपयोग करें।
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style के साथ एरे
आप स्टाइल ऑब्जेक्ट की एरे पास कर सकते हैं और Vue उन्हें मिला देता है।
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>स्वचालित प्रीफ़िक्स जोड़ना
जब किसी CSS प्रॉपर्टी के लिए ब्राउज़र-विशिष्ट प्रीफ़िक्स आवश्यक हो, तो Vue ब्राउज़र द्वारा समर्थित होने पर उन्हें अपने-आप जोड़ सकता है।
- आप मानक प्रॉपर्टी लिखते हैं
- आवश्यक होने पर Vue सही प्रीफ़िक्स लागू करता है
इससे आपकी स्टाइल बाइंडिंग साफ़-सुथरी रहती हैं।
डायनेमिक एट्रिब्यूट बाइंडिंग
किसी भी एट्रिब्यूट को :attr से डायनेमिक रूप से बाइंड किया जा सकता है।
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>बूलियन एट्रिब्यूट
disabled जैसे बूलियन एट्रिब्यूट के लिए Vue एट्रिब्यूट को तभी शामिल करता है, जब मान सत्य हो।
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->कई क्लास को शर्त के आधार पर बाइंड करना
एक साथ कई क्लास को टॉगल करने का व्यावहारिक उदाहरण।
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>त्वरित जाँच
क्लास और स्टाइल बाइंडिंग की अपनी समझ जाँचें।
पुनरावलोकन: एट्रिब्यूट और क्लास बाइंडिंग
आपने डायनेमिक बाइंडिंग सीखीं:
- :class का ऑब्जेक्ट सिंटैक्स सत्यता के आधार पर क्लास टॉगल करता है
- :class का एरे सिंटैक्स एक सूची लागू करता है
- :style camelCase कुंजियों के साथ इनलाइन स्टाइल को बाइंड करता है
- किसी भी एट्रिब्यूट को :attr से बाइंड किया जा सकता है
- बूलियन एट्रिब्यूट केवल सत्य मान होने पर दिखाई देते हैं
अगला विषय: component की मूल बातें और संचार।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 42
- पाठ
- 156
अक्सर पूछे जाने वाले प्रश्न
क्या “एट्रिब्यूट और क्लास बाइंडिंग” पाठ निःशुल्क है?
हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “एट्रिब्यूट और क्लास बाइंडिंग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“एट्रिब्यूट और क्लास बाइंडिंग” में मैं क्या सीखूँगा?
एट्रिब्यूट, क्लास और स्टाइल को डायनेमिक रूप से बाइंड कीजिए आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 3वाँ पाठ है।
“एट्रिब्यूट और क्लास बाइंडिंग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- इंटरपोलेशन और डायरेक्टिव
- कंडीशनल और लूप
- एट्रिब्यूट और क्लास बाइंडिंग