v-model für alle Formularelemente
Input, textarea, select, Checkbox, Radio — wie sich v-model an den jeweiligen Elementtyp anpasst.
v-model für alle Formularelemente ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Formulareingaben binden
v-model stellt eine bidirektionale Bindung zwischen Formularelementen und Ihrem reaktiven Zustand her. Jede Art von Steuerelement — Textfeld, Checkbox, Radio-Button, Select und Textarea — verwendet v-model etwas anders. In dieser Lektion werden alle behandelt.
Texteingabe
Bei einem Texteingabefeld bindet v-model den Wert und aktualisiert ihn bei jeder Eingabe. Geben Sie Text in das Feld ein, und die ref wird sofort aktualisiert.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name" />
<p>Hello, {{ name }}</p>
</template>Textarea
Eine Textarea funktioniert genauso wie ein Texteingabefeld. Verwenden Sie v-model direkt am Element — fügen Sie keinen Text zwischen die Tags ein.
<template>
<textarea v-model="message"></textarea>
</template>Checkbox: Boolean
Eine einzelne Checkbox, die an eine boolesche ref gebunden ist, wechselt zwischen true und false.
<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>
<template>
<input type="checkbox" v-model="agreed" />
<p>Agreed: {{ agreed }}</p>
</template>Checkbox: Mehrere Werte in einem Array
Binden Sie mehrere Checkboxen an dieselbe Array-ref. Jede aktivierte Checkbox fügt ihren value zum Array hinzu.
<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>Radio-Buttons
Radio-Buttons einer Gruppe teilen sich eine ref. Die ref enthält den value der ausgewählten Option.
<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>Select: Einzelne Auswahl
Ein einzelnes Select wird an einen Wert gebunden, der der ausgewählten Option entspricht. Wenn Sie möchten, können Sie eine Platzhalteroption mit einem leeren Wert bereitstellen.
<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>Select: Mehrfachauswahl
Fügen Sie das Attribut multiple hinzu und binden Sie das Select an ein Array. Die ausgewählten Optionen werden im Array gesammelt.
<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>Wertmodifikatoren
Modifikatoren verfeinern v-model: .trim entfernt Leerraum, .number wandelt den Wert in eine Zahl um und .lazy synchronisiert bei einer Änderung statt bei jedem Tastendruck.
<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />Ein einheitliches Denkmodell
Unabhängig vom Steuerelement bedeutet v-model immer: Wert hinein, Änderung hinaus. Der Typ des Steuerelements bestimmt lediglich die Form des Werts: einen Boolean, einen String oder ein Array.
Benutzerdefinierte Eingabekomponenten
v-model funktioniert auch mit Ihren eigenen Komponenten. Eine benutzerdefinierte Eingabe definiert eine modelValue-Prop und emittiert update:modelValue, sodass sie sich gegenüber ihrer übergeordneten Komponente wie ein natives Steuerelement verhält.
<!-- parent -->
<MyTextInput v-model="name" />
<!-- child declares modelValue + emits update:modelValue -->Kurzer Test
Testen Sie Ihr Wissen über Formularbindungen.
Zusammenfassung
v-model bei Formularelementen:
- Textfelder und Textareas binden einen String.
- Eine einzelne Checkbox bindet einen Boolean, mehrere Checkboxen binden ein Array.
- Radio-Buttons teilen sich eine ref, die den ausgewählten Wert enthält.
- Select bindet einen Wert; mit
multiplewird ein Array gebunden. - Modifikatoren:
.trim,.number,.lazy.
Häufig gestellte Fragen
Ist die Lektion „v-model für alle Formularelemente“ kostenlos?
Ja — der vollständige Text von „v-model für alle Formularelemente“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „v-model für alle Formularelemente“?
Input, textarea, select, Checkbox, Radio — wie sich v-model an den jeweiligen Elementtyp anpasst. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „v-model für alle Formularelemente“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- v-model für alle Formularelemente
- Formular absenden und zurücksetzen
- Muster für manuelle Validierung
- VeeValidate für schema-basierte Validierung