Πώς δεσμεύεις κλάσεις και στυλ δυναμικά στο Vue;

Question

Accepted Answer

Το Vue δίνει στο `:class` και `:style` ειδική **σύνταξη αντικειμένου και πίνακα** ώστε να μπορείς να εφαρμόζεις υπό όρους κλάσεις και inline styles βάσει του αντιδραστικού state — καθαρότερο από τη χειروκίνητη δημιουργία συμβολοσειρών κλάσης. ## Σύνταξη αντικειμένου για :class — εναλλαγή κλάσεων κατά συνθήκη ```vue ``` Κάθε κλειδί είναι όνομα κλάσης και κάθε τιμή είναι boolean συνθήκη — η κλάση εμφανίζεται μόνο όταν η τιμή της είναι αληθής. Αυτό είναι το πιο κοινό μοτίβο για styling που οδηγείται από state (ενεργές καρτέλες, καταστάσεις σφάλματος κ.λπ.). ## Σύνταξη πίνακα για :class — συνδυασμός πολλαπλών ```vue ``` ## :class συγχωνεύεται με το στατικό χαρακτηριστικό class ```vue

...

``` Μπορείς να χρησιμοποιήσεις και `class` και `:class` μαζί; το Vue τα συγχωνεύει. ## Σύνταξη αντικειμένου/πίνακα για :style ```vue ``` ## Δέσμευση κλάσεων σε συστατικά ```vue ``` ## Γιατί είναι σημαντικό Η δυναμική δέσμευση κλάσης/style είναι καθημερινή δουλειά Vue — επισήμανση του ενεργού στοιχείου πλοήγησης, εμφάνιση σφαλμάτων επικύρωσης, θέμα. Η σύνταξη αντικειμένου (`{ className: condition }`) κάνει το υπό όρους styling δηλωτικό και ευαναγνώστων, αποφεύγοντας την επιρρεπή σε σφάλματα χειροκίνητη συνένωση συμβολοσειρών. Η γνώση ότι `:class` συγχωνεύεται με στατικό `class` και το πρόσωπο του πίνακα για τον συνδυασμό πηγών, καλύπτει πρακτικά όλες τις ανάγκες styling υπό όρους καθαρά.