bind:value dla pól tekstowych
Automatycznie synchronizuj wartości pól tekstowych ze zmiennymi komponentu.
bind:value dla pól tekstowych to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 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 Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Działanie bind:value
Dyrektywa bind:value tworzy dwukierunkowe połączenie między zmienną a polem formularza.
Podstawowy przykład
Powiąż zmienną zadeklarowaną za pomocą let z polem tekstowym. Wpisywanie aktualizuje zmienną, a zmiany programowe aktualizują pole.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Skrócona składnia
Jeśli zmienna i atrybut mają tę samą nazwę, można pominąć prawą stronę.
<input bind:value />Pola liczbowe
W przypadku type="number" Svelte automatycznie konwertuje wartość na liczbę.
<input type="number" bind:value={age} />Pola zakresu
Suwaki działają w ten sam sposób i również konwertują wartości na liczby.
<input type="range" bind:value={volume} />Pola tekstowe wielowierszowe
Powiąż value w polach tekstowych wielowierszowych tak samo jak w polach tekstowych.
<textarea bind:value={comment}></textarea>Pojedynczy wybór
W przypadku pojedynczego elementu <select> powiąż wartość z wartością wybranej opcji.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Aktualizacja programowa
Przypisanie wartości do powiązanej zmiennej natychmiast aktualizuje pole. Jest to przydatne w przypadku przycisków czyszczących formularz.
function clear() { name = ""; }Bez potrzeby ponownego renderowania
Reaktywność jest automatyczna. Nigdy nie trzeba wywoływać setState ani ponownie tworzyć wiązania ręcznie.
Walidacja
Dodaj instrukcje reaktywne, aby przeprowadzać walidację podczas wpisywania.
$: isValid = email.includes("@");Opóźnianie walidacji
W przypadku kosztownej walidacji zastosuj opóźnianie wewnątrz instrukcji reaktywnej lub użyj narzędzia, takiego jak lodash.debounce.
Szybkie sprawdzenie
Co robi bind:value?
Podsumowanie
Użyj bind:value do dwukierunkowego wiązania pól, z automatyczną konwersją typów w polach liczbowych i polach zakresu.
Często zadawane pytania
Czy lekcja „bind:value dla pól tekstowych” jest bezpłatna?
Tak — pełny tekst „bind:value dla pól tekstowych” 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 Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „bind:value dla pól tekstowych”?
Automatycznie synchronizuj wartości pól tekstowych ze zmiennymi komponentu. Ćwiczysz Sveltejs 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ąć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs 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 1 z 4.
Ile czasu zajmuje lekcja „bind:value dla pól tekstowych”?
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 Sveltejs Academy?
Tak. Każda lekcja Sveltejs 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
- bind:value dla pól tekstowych
- bind:checked dla pól wyboru
- bind:group dla grup przycisków radiowych i pól wyboru
- bind:this dla referencji do elementów DOM