Cum conectezi dinamic clasele și stilurile în Vue?

Question

Accepted Answer

Vue oferă o **sintaxă specială de obiect și array** pentru `:class` și `:style`, assim încât să poți aplica în mod condiționat clase și stiluri inline pe baza stării reactive — mai curat decât construirea manuală a șirurilor de clase. ## Sintaxa obiectului pentru :class — comută clase după condiție ```vue ``` Fiecare cheie este un nume de clasă și fiecare valoare este o condiție booleană — clasa apare numai când valoarea sa este adevărată. Acesta este cel mai frecvent pattern pentru styling condus de stare (file active, stări de eroare, etc.). ## Sintaxa array pentru :class — combină mai multe ```vue ``` ## :class se fuzionează cu atributul static class ```vue

...

``` Poți folosi atât `class` cât și `:class` împreună; Vue le fuzionează. ## Sintaxa obiect/array pentru :style ```vue ``` ## Conectarea claselor pe componente ```vue ``` ## De ce este important Conectarea dinamică a claselor/stilurilor este o muncă cotidiană în Vue — evidențierea elementului nav activ, afișarea erorilor de validare, tema. Sintaxa obiectului (`{ className: condition }`) face stilizarea condițională declarativă și ușor de citit, evitând concatenarea manuală a șirurilor predispusă la erori. Știind că `:class` se fuzionează cu `class` static și forma array pentru combinarea surselor, acoperă practic toate nevoile de styling condiționat în mod curat.