Dynamiczne i wielokrotne wiązania v-bind
Dynamiczne nazwy atrybutów :[dynamicAttr], składnia obiektu v-bind, jednoczesne wiązanie wielu atrybutów.
Dynamiczne i wielokrotne wiązania v-bind to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. 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 4 lekcji w sumie.
Dynamiczne wiązanie atrybutów
Dyrektywa v-bind (skrót :) wiąże atrybut HTML z wartością reaktywną. Umożliwia tworzenie dynamicznych klas, stylów, a nawet atrybutów o dynamicznych nazwach.
Podstawy v-bind
Można powiązać dowolny atrybut z wyrażeniem. Gdy wartość się zmieni, Vue zaktualizuje atrybut.
<img :src="imageUrl" :alt="description" />Wiązanie klas: składnia obiektowa
W przypadku klas składnia obiektowa włącza lub wyłącza klasę na podstawie wartości truthy. Klucz jest nazwą klasy, a wartość decyduje o tym, czy klasa zostanie zastosowana.
<div :class="{ active: isActive, disabled: isDisabled }"></div>Wiązanie klas: składnia tablicowa
Składnia tablicowa stosuje listę klas. Można łączyć statyczne ciągi znaków ze zmiennymi reaktywnymi lub zagnieździć obiekt dla wpisów warunkowych.
<div :class="[baseClass, isActive ? activeClass : '']"></div>Łączenie składni tablicowej i obiektowej
Można zagnieździć formę obiektową w tablicy, aby połączyć zalety obu składni — klasy stosowane zawsze oraz klasy warunkowe.
<div :class="[baseClass, { active: isActive }]"></div>Wiązanie stylów: składnia obiektowa
Style inline można wiązać za pomocą obiektu. Należy używać nazw właściwości w camelCase (lub kebab-case w cudzysłowie). Wartości mogą być reaktywne.
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>Wiązanie stylów: tablica obiektów
Można przekazać tablicę obiektów stylów, aby połączyć wiele źródeł stylów, takich jak styl bazowy i nadpisanie motywu.
<div :style="[baseStyles, overrideStyles]"></div>Wiązanie wielu atrybutów naraz
v-bind bez argumentu nakłada na element cały obiekt atrybutów. Każdy klucz staje się atrybutem.
<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>
<template>
<div v-bind="attrs"></div>
</template>Dynamiczne nazwy atrybutów
Nawiasy kwadratowe pozwalają obliczyć samą nazwę atrybutu w czasie działania. Wyrażenie w nawiasach jest obliczane i używane jako klucz atrybutu.
<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>
<template>
<div :[attrName]="attrValue"></div>
</template>Kiedy używać poszczególnych składni
- Obiektowa składnia klas — przełączanie kilku klas na podstawie warunku.
- Tablicowa składnia klas — łączenie klasy bazowej z klasami warunkowymi.
v-bind="obj"— przekazywanie całego zestawu atrybutów.- Dynamiczna nazwa
:[name]— gdy klucz atrybutu jest ustalany w czasie działania.
Przykład łączony
Ten element używa jednocześnie dynamicznej klasy, dynamicznego stylu i rozproszonych atrybutów — wszystkie te wartości są reaktywne.
<div
:class="[base, { active: isActive }]"
:style="{ color: textColor }"
v-bind="extraAttrs"
></div>Szybkie sprawdzenie
Proszę sprawdzić swoją wiedzę na temat v-bind.
Podsumowanie
Omówiono szeroki zakres zastosowań v-bind:
- Obiektowa składnia klas przełącza klasy na podstawie warunku, a składnia tablicowa pozwala je łączyć.
- Wiązanie stylów korzysta z obiektów (camelCase) lub tablic obiektów.
v-bind="obj"rozprowadza wszystkie atrybuty z obiektu.:[name]="val"wiąże atrybut o dynamicznie ustalanej nazwie.
Często zadawane pytania
Czy lekcja „Dynamiczne i wielokrotne wiązania v-bind” jest bezpłatna?
Tak — pełny tekst „Dynamiczne i wielokrotne wiązania v-bind” 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 4 lekcji w sumie.
Co nauczysz się w „Dynamiczne i wielokrotne wiązania v-bind”?
Dynamiczne nazwy atrybutów :[dynamicAttr], składnia obiektu v-bind, jednoczesne wiązanie wielu atrybutów. Ć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 4.
Ile czasu zajmuje lekcja „Dynamiczne i wielokrotne wiązania v-bind”?
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
- v-model: mechanizmy wiązania dwukierunkowego
- Modyfikatory zdarzeń v-on
- Dynamiczne i wielokrotne wiązania v-bind
- Pisanie własnych dyrektyw