तपाईंले Vue मा क्लास र शैलीहरू कसरी गतिशीलरूपमा बाँध्नुहुन्छ?

Question

Accepted Answer

Vue ले `:class` र `:style` लाई विशेष **वस्तु र array syntax** प्रदान गर्छ ताकि तपाईंले प्रतिक्रियाशील स्थितिको आधारमा सर्तसहितरूपमा क्लास र inline styles लागू गर्न सक्नुहुन्छ — क्लास स्ट्रिङ्हरू म्यानुएली निर्माण गर्नु भन्दा सफा। ## :class को लागि वस्तु syntax — शर्तद्वारा क्लास टगल गर्नुहोस् ```vue ``` प्रत्येक कुञ्जी एक क्लास नाम हो र प्रत्येक मूल्य एक boolean शर्त हो — क्लास केवल तब देखा पर्छ जब यसको मूल्य truthy हो। यो स्थिति-संचालित styling को लागि सबैभन्दा सामान्य प्याटर्न हो (सक्रिय ट्याबहरू, त्रुटि स्थितिहरू, आदि)। ## Array syntax for :class — बहुविध संयोजन गर्नुहोस् ```vue ``` ## :class static class attribute सँग मर्ज हुन्छ ```vue

...

``` तपाईंले `class` र `:class` दुबै एकसाथ प्रयोग गर्न सक्नुहुन्छ; Vue तिनीहरूलाई मर्ज गर्छ। ## :style को लागि वस्तु/array syntax ```vue ``` ## कम्पोनेन्टहरूमा क्लास बाँध्नुहोस् ```vue ``` ## किन यो महत्त्वपूर्ण छ गतिशील क्लास/style बाँध्नु Vue को दैनिक काम हो — सक्रिय nav आइटम हाइलाइट गर्दै, validation त्रुटिहरू देखाई दै, theming। वस्तु syntax (`{ className: condition }`) ले सर्तसहित styling लाई घोषणात्मक र पठनीय बनाता हो, त्रुटि-प्रवण म्यानुएली स्ट्रिङ concatenation बेवास्ता गर्दै। यो जान्नुहोस् कि `:class` static `class` सँग मर्ज हुन्छ, र array form बिभिन्न स्रोतहरू संयोजन गर्नको लागि, लगभग सबै सर्तसहित-styling आवश्यकताहरूलाई सफाईसाथ कभर गर्छ।