v-model dla wszystkich elementów formularza
Input, textarea, select, checkbox, radio — jak v-model dostosowuje się do typu elementu.
v-model dla wszystkich elementów formularza to bezpłatna lekcja Vue 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Powiązanie pól formularza
v-model tworzy dwukierunkowe powiązanie między kontrolkami formularza a stanem reaktywnym. Każdy rodzaj kontrolki — pole tekstowe, pole wyboru, przyciski opcji, lista wyboru i textarea — używa v-model w nieco inny sposób. W tej lekcji omówiono je wszystkie.
Pole tekstowe
W przypadku pola tekstowego v-model wiąże wartość i aktualizuje ją podczas wprowadzania danych. Po wpisaniu tekstu w polu ref jest aktualizowany na bieżąco.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name" />
<p>Hello, {{ name }}</p>
</template>Textarea
Textarea działa tak samo jak pole tekstowe. Należy użyć v-model bezpośrednio na elemencie — nie należy umieszczać tekstu między jego znacznikami.
<template>
<textarea v-model="message"></textarea>
</template>Pole wyboru: wartość logiczna
Pojedyncze pole wyboru powiązane z refem wartości logicznej przełącza się między true a false.
<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>
<template>
<input type="checkbox" v-model="agreed" />
<p>Agreed: {{ agreed }}</p>
</template>Pole wyboru: wiele wartości w tablicy
Należy powiązać kilka pól wyboru z tym samym refem tablicowym. Każde zaznaczone pole dodaje swoją wartość value do tablicy.
<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>
<template>
<input type="checkbox" value="reading" v-model="hobbies" />
<input type="checkbox" value="coding" v-model="hobbies" />
<p>{{ hobbies }}</p>
</template>Przyciski opcji
Przyciski opcji w jednej grupie współdzielą jeden ref. Ref przechowuje wartość value wybranej opcji.
<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>
<template>
<input type="radio" value="small" v-model="picked" />
<input type="radio" value="large" v-model="picked" />
<p>Picked: {{ picked }}</p>
</template>Lista wyboru: pojedynczy wybór
Pojedyncza lista wyboru jest powiązana z wartością odpowiadającą wybranej opcji. Jeśli jest taka potrzeba, można dodać opcję zastępczą z pustą wartością.
<script setup>
import { ref } from 'vue'
const city = ref('')
</script>
<template>
<select v-model="city">
<option value="">Choose</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Lista wyboru: wiele wartości
Należy dodać atrybut multiple i powiązać listę z tablicą. Wybrane opcje zostaną zebrane w tablicy.
<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>
<template>
<select v-model="cities" multiple>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Modyfikatory wartości
Modyfikatory doprecyzowują działanie v-model: .trim usuwa białe znaki, .number konwertuje wartość na liczbę, a .lazy synchronizuje ją przy zmianie zamiast po każdym naciśnięciu klawisza.
<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />Jeden model mentalny
Niezależnie od rodzaju kontrolki v-model oznacza przekazanie wartości do środka i przekazanie zmiany na zewnątrz. Typ kontrolki decyduje tylko o kształcie wartości: może to być wartość logiczna, ciąg znaków lub tablica.
Niestandardowe komponenty pól
v-model działa również z własnymi komponentami. Niestandardowe pole deklaruje właściwość modelValue i emituje zdarzenie update:modelValue, dzięki czemu zachowuje się wobec komponentu nadrzędnego jak natywna kontrolka.
<!-- parent -->
<MyTextInput v-model="name" />
<!-- child declares modelValue + emits update:modelValue -->Szybki test
Proszę sprawdzić swoją wiedzę na temat powiązań formularzy.
Podsumowanie
v-model w różnych kontrolkach formularza:
- Pole tekstowe i textarea są powiązane z ciągiem znaków.
- Pojedyncze pole wyboru jest powiązane z wartością logiczną, a wiele pól wyboru — z tablicą.
- Przyciski opcji współdzielą jeden ref przechowujący wartość wybranej opcji.
- Lista wyboru jest powiązana z wartością; z atrybutem
multiplejest powiązana z tablicą. - Modyfikatory:
.trim,.number,.lazy.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „v-model dla wszystkich elementów formularza” jest bezpłatna?
Tak — pełny tekst „v-model dla wszystkich elementów formularza” 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 „v-model dla wszystkich elementów formularza”?
Input, textarea, select, checkbox, radio — jak v-model dostosowuje się do typu elementu. Ć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 1 z 4.
Ile czasu zajmuje lekcja „v-model dla wszystkich elementów formularza”?
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 dla wszystkich elementów formularza
- Wysyłanie i resetowanie formularza
- Wzorce ręcznej walidacji
- VeeValidate do walidacji opartej na schemacie