Kaip dinamiškai Vue susieti klases ir stilius?

Question

Accepted Answer

Vue suteikia `:class` ir `:style` specialią **objekto ir masyvo sintaksę**, kad galėtumėte sąlyginai pritaikyti klases ir įterptus stilius pagal reaktyvią būseną — švariau nei rankiniu būdu kuriamos klasės eilutės. ## Objekto sintaksė :class — perjungti klases pagal sąlygą ```vue ``` Kiekvienas raktas yra klasės pavadinimas, o kiekviena reikšmė yra Būlio sąlyga — klasė rodoma tik tada, kai jos reikšmė yra teisinga. Tai labiausiai paplitęs būseną nusakomo stiliaus šablonas (aktyvios skirtukų, klaidos būsenos ir kt.). ## Masyvo sintaksė :class — sujungti kelis ```vue ``` ## :class susiliedimo su statine class atributo ```vue

...

``` Galite naudoti ir `class`, ir `:class` kartu; Vue juos sujungia. ## Objekto/masyvo sintaksė :style ```vue ``` ## Klasių susietas komponentuose ```vue ``` ## Kodėl tai svarbu Dinaminis klasės/stiliaus susietimas yra kasdieninis Vue darbas — aktyvaus navigacijos elemento paryškinimas, tikrinimo klaidų rodymas, tema. Objekto sintaksė (`{ className: condition }`) daro sąlyginį stilių deklaratyvų ir lengvai skaitomą, išvengiant klaidą turinčios rankinės eilučių sujungimo. Žinojimas, kad `:class` sujungiasi su statine `class` ir masyvo forma sujungiamoms šaltiniams, praktiškai apima visus sąlyginius stiliaus poreikius švariems.