Vue में आप classes और styles को गतिशील रूप से कैसे bind करते हैं?

Question

Accepted Answer

Vue `:class` और `:style` को विशेष **object और array syntax** देता है ताकि आप reactive state के आधार पर classes और inline styles को सशर्त रूप से लागू कर सकें — class strings को मैन्युअल रूप से बनाने की तुलना में अधिक साफ़। ## :class के लिए object syntax — शर्त के अनुसार classes toggle करें ```vue ``` हर key एक class name है और हर value एक boolean शर्त है — class केवल तभी दिखती है जब उसकी value truthy हो। state-संचालित styling (active tabs, error states, आदि) के लिए यह सबसे आम pattern है। ## :class के लिए array syntax — कई को मिलाएँ ```vue ``` ## :class static class attribute के साथ मर्ज हो जाता है ```vue

...

``` आप `class` और `:class` दोनों को एक साथ उपयोग कर सकते हैं; Vue उन्हें मर्ज कर देता है। ## :style के लिए object/array syntax ```vue ``` ## Components पर classes bind करना ```vue ``` ## यह क्यों महत्वपूर्ण है Dynamic class/style binding रोज़मर्रा का Vue काम है — active nav item को हाइलाइट करना, validation errors दिखाना, theming। Object syntax (`{ className: condition }`) सशर्त styling को declarative और पठनीय बनाता है, त्रुटि-प्रवण मैनुअल string concatenation से बचाता है। यह जानना कि `:class` static `class` के साथ मर्ज होता है, और स्रोतों को मिलाने के लिए array रूप, लगभग सभी सशर्त-styling ज़रूरतों को साफ़ ढंग से कवर करता है।