Hogyan kötöd meg dinamikusan az osztályokat és stílusokat a Vue-ban?

Question

Accepted Answer

A Vue a `:class` és `:style` számára speciális **objektum és tömb szintaxist** biztosít, így reaktív állapot alapján feltételesen alkalmazhatsz osztályokat és beágyazott stílusokat — tisztább, mint az osztályláncolatok kézi felépítése. ## Objektum szintaxis a :class — osztályok be/ki kapcsolása feltétel alapján ```vue ``` Minden kulcs egy osztálynév, és minden érték egy logikai feltétel — az osztály csak akkor jelenik meg, ha az értéke igaz. Ez a leggyakoribb minta az állapot-vezérelt stílusozáshoz (aktív fülek, hibás állapotok, stb.). ## Tömb szintaxis a :class — több kombináció ```vue ``` ## A :class összevonja a statikus class attribútummal ```vue

...

``` A `class` és `:class` kettőt használhatsz egyszerre; a Vue összevonja őket. ## Objektum/tömb szintaxis a :style számára ```vue ``` ## Osztályok kötése komponensekhez ```vue ``` ## Miért fontos A dinamikus osztály/stílus kötés a Vue napi munkájának része — a aktív navigációs elem kiemelése, az érvényesítési hibák megjelenítése, a témázás. Az objektum szintaxis (`{ className: condition }`) deklaratív és olvasható kondicionális stílust tesz lehetővé, elkerülve a hibára hajlamos kézi karakterlánc-összefűzést. Annak ismerete, hogy a `:class` összevonja a statikus `class`-sal, és a tömb forma több forrás kombinálásához, gyakorlatilag az összes kondicionális stílus igényt tisztán lefedi.