Kako dinamički vezati klase i stilove u Vue-u?

Question

Accepted Answer

Vue daje `:class` i `:style` posebnu **objektnu i array sintaksu** kako bi mogao uvjetno primjenjivati klase i inline stilove na temelju reaktivnog stanja — čišće nego ručno graditi stringove klasa. ## Objektna sintaksa za :class — mijenjati klase prema uvjetu ```vue ``` Svaki ključ je naziv klase, a svaka vrijednost je boolean uvjet — klasa se pojavljuje samo kada je njena vrijednost istinita. Ovo je najčešće korišten obrazac za stilizaciju vođenu stanjem (aktivne kartice, stanja greške, itd.). ## Array sintaksa za :class — kombinirati više ```vue ``` ## :class se spaja sa statičkim class atributom ```vue

...

``` Možete koristiti `class` i `:class` zajedno; Vue ih spaja. ## Objektna/array sintaksa za :style ```vue ``` ## Vezanje klasa na komponente ```vue ``` ## Zašto je to važno Dinamičko vezanje klase/stila je svakodnevni Vue posao — označavanje aktivne stavke navigacije, prikaz grešaka validacije, tema. Objektna sintaksa (`{ className: condition }`) čini uvjetnu stilizaciju deklarativnom i čitljivom, izbjegavajući sklone greškama ručne nadovezivanje stringova. Znanje da se `:class` spaja sa statičkim `class` atributom, i array oblik za kombiniranje izvora, pokriva praktički sve potrebe uvjetne stilizacije čisto.