Powiązania atrybutów i klas
Powiążą Państwo dynamicznie atrybuty, klasy i style.
Powiązania atrybutów i klas to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.
Wiązanie klas i stylów
Często zachodzi potrzeba zmiany klasy lub stylu elementu w zależności od jego stanu.
Vue traktuje :class i :style w specjalny sposób, dzięki czemu można przekazywać obiekty i tablice, a nie tylko ciągi znaków.
Składnia obiektu :class
Przekaż obiekt do :class. Klucze są nazwami klas, a wartości prawdziwe powodują ich dołączenie.
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->Łączenie klas statycznych i dynamicznych
Statyczny atrybut class i dynamiczny :class są łączone.
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>Składnia tablicy :class
Przekaż tablicę, aby zastosować listę klas.
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->Wyrażenia warunkowe w tablicy
Można umieszczać wyrażenia warunkowe wewnątrz tablicy.
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>Wiązanie stylów inline
Dyrektywa :style wiąże style inline za pomocą obiektu.
Należy używać nazw właściwości w notacji camelCase, takich jak fontSize.
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style z tablicą
Można przekazać tablicę obiektów stylów, a Vue połączy je w jeden zestaw.
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>Automatyczne dodawanie prefiksów
Gdy właściwość CSS wymaga prefiksów vendorowych, Vue może dodawać je automatycznie, jeśli przeglądarka je obsługuje.
- Należy wpisać standardową właściwość
- Vue doda odpowiedni prefiks, jeśli będzie potrzebny
Dzięki temu wiązania stylów pozostają przejrzyste.
Dynamiczne wiązanie atrybutów
Każdy atrybut można wiązać dynamicznie za pomocą :attr.
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>Atrybuty logiczne
W przypadku atrybutów logicznych, takich jak disabled, Vue uwzględnia atrybut tylko wtedy, gdy wartość jest truthy.
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->Warunkowe wiązanie wielu klas
Praktyczny przykład przełączania kilku klas jednocześnie.
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>Szybki test
Proszę sprawdzić swoją znajomość wiązania klas i stylów.
Podsumowanie: wiązanie atrybutów i klas
W tym rozdziale poznali Państwo wiązania dynamiczne:
- Obiektowa składnia :class przełącza klasy na podstawie wartości truthy
- Tablicowa składnia :class stosuje listę klas
- :style wiąże style inline za pomocą kluczy camelCase
- Każdy atrybut można wiązać za pomocą :attr
- Atrybuty logiczne pojawiają się tylko wtedy, gdy wartość jest truthy
Następnie: podstawy komponentów i komunikacja.
Często zadawane pytania
Czy lekcja „Powiązania atrybutów i klas” jest bezpłatna?
Tak — pełny tekst „Powiązania atrybutów i klas” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Powiązania atrybutów i klas”?
Powiążą Państwo dynamicznie atrybuty, klasy i style. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Powiązania atrybutów i klas”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Interpolacja i dyrektywy
- Warunki i pętle
- Powiązania atrybutów i klas