Kuinka sidot luokat ja tyylit dynaamisesti Vue-sovelluksessa?

Question

Accepted Answer

Vue antaa `:class`-lle ja `:style`-lle erityisen **objekti- ja taulukkosyntaksin** jotta voit ehdollisesti soveltaa luokkia ja inline-tyylejä reaktiivisen tilan perusteella — siistimpi kuin luokka-merkkijonojen manuaalinen rakentaminen. ## Objektisyntaksi :class-lle — luokkien vaihtaminen ehdon mukaan ```vue ``` Jokaisessa avaimessa on luokan nimi ja jokainen arvo on boolean-ehto — luokka näkyy vain kun sen arvo on tosi. Tämä on yleisin kuvio tilan ohjaamaan tyylitykseen (aktiiviset välilehdet, virhetilat jne.). ## Taulukkosyntaksi :class-lle — yhdistä useita ```vue ``` ## :class yhdistyy staattisen class-attribuutin kanssa ```vue

...

``` Voit käyttää `class`- ja `:class`-attribuutteja yhdessä; Vue yhdistää ne. ## Objekti-/taulukkosyntaksi :style-lle ```vue ``` ## Luokkien sitominen komponentteihin ```vue ``` ## Miksi se on tärkeää Dynaaminen luokka-/tyyli-sidonnainen työ on jokapäiväistä Vue-työtä — aktiivisen navigointipalkin kohteen korostaminen, validointivirheiden näyttäminen, teemoitus. Objektisyntaksi (`{ className: condition }`) tekee ehdollisesta tyylityksestä deklaratiivista ja luettavaa, ja välttää virheille altista manuaalista merkkijonojen yhdistämistä. Tieto siitä, että `:class` yhdistyy staattiseen `class`-attribuuttiin ja taulukon muoto lähteiden yhdistämiseksi, kattaa käytännössä kaikki ehdollisen tyylityksen tarpeet siististi.