Formular-Eingabebindungen ​

Beim Umgang mit Formularen auf dem Frontend müssen wir oft den Zustand von Formulareingabeelementen mit dem entsprechenden Zustand in JavaScript synchronisieren. Es kann mühsam sein, Wertbindungen und Änderungsereignis-Listener manuell zu verdrahten:

<input
  :value="text"
  @input="event => text = event.target.value">

The v-model directive helps us simplify the above to:

<input v-model="text">

Darüber hinaus kann v-model auf Eingaben verschiedener Typen, <textarea> und <select> Elemente angewendet werden. Es wird automatisch auf verschiedene DOM-Eigenschafts- und Ereignispaare erweitert, je nachdem, für welches Element es verwendet wird:

• <input> mit Textarten und <textarea> Elemente verwenden value Eigentum und input Event;
• <input type="checkbox"> und <input type="radio"> verwenden checked Eigentum und change Event;
• <select> verwenden value als Requisit und change als Ereignis.

Grundlegende Verwendung ​

Text ​

<p>Die Nachricht lautet: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

::: Tipp Hinweis Für Sprachen, die eine IME (Chinesisch, Japanisch, Koreanisch usw.), werden Sie feststellen, dass v-model während der IME-Komposition nicht aktualisiert wird. Wenn Sie auch auf diese Aktualisierungen reagieren möchten, verwenden Sie Ihren eigenen input-Ereignis-Listener und eine value-Bindung, anstatt v-model zu verwenden. :::

Mehrzeiliger Text ​

<span>Mehrzeilige Nachricht ist:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="mehrere Zeilen hinzufügen"></textarea>

Beachten Sie, dass die Interpolation innerhalb von <Textarea> nicht funktionieren wird. Verwenden Sie stattdessen v-model.

<!-- bad -->
<textarea>{{ text }}</textarea>

<!-- good -->
<textarea v-model="text"></textarea>

Checkbox ​

Einzelne Checkbox, boolescher Wert:

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

Wir können auch mehrere Kontrollkästchen mit demselben Array oder einstellen Wert:

const checkedNames = ref([])

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

<div>Geprüfte Namen: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>

In diesem Fall enthält das Array checkedNames immer die Werte der aktuell angekreuzten Felder.

Radio ​

<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

Auswählen ​

Einzeln auswählen:

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Bitte wählen Sie eine</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

:::Tipp Hinweis Wenn der anfängliche Wert Ihres "v-model"-Ausdrucks mit keiner der Optionen übereinstimmt, wird das <select>-Element in einem "nicht ausgewählten" Zustand dargestellt. Unter iOS führt dies dazu, dass der Benutzer nicht in der Lage ist, das erste Element auszuwählen, da iOS in diesem Fall kein Änderungsereignis auslöst. Es wird daher empfohlen, eine deaktivierte Option mit einem leeren Wert bereitzustellen, wie im obigen Beispiel gezeigt. :::

Mehrfachauswahl (an Array gebunden):

<div>Ausgewählte: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Auswahloptionen können mit v-for dynamisch gerendert werden:

const selected = ref('A')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Ausgewählte: {{ selected }}</div>

Wert Bindungen ​

Bei Radio-, Checkbox- und Select-Optionen sind die v-model-Bindungswerte in der Regel statische Strings (oder Booleans bei Checkbox):

<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` is a string "abc" when the first option is selected -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Aber manchmal wollen wir vielleicht den Wert an eine dynamische Eigenschaft der aktuellen aktiven Instanz binden. Wir können v-bind verwenden, um das zu erreichen. Darüber hinaus können wir mit v-bind den Eingabewert an Nicht-String-Werte binden.

Checkbox ​

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value und false-value sind Vue-spezifische Attribute, die nur mit v-model funktionieren. Hier wird der Wert der Eigenschaft toggle auf 'yes' gesetzt, wenn das Kästchen markiert ist, und auf "no", wenn es nicht markiert ist. Man kann sie auch an dynamische Werte binden, indem man v-bind verwendet:

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

:::Hinweis Tipp Die Attribute wahrer Wert und falscher Wert wirken sich nicht auf das Attribut Wert der Eingabe aus, da Browser keine nicht markierten Kästchen in Formularübermittlungen einschließen. Um zu garantieren, dass einer von zwei Werten in einem Formular übermittelt wird (z. B. "ja" oder "nein"), verwenden Sie stattdessen Radioeingaben. :::

Radio ​

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick wird auf den Wert von first gesetzt, wenn der erste Radioeingang angekreuzt wird, und auf den Wert von second, wenn der zweite angekreuzt wird.

Optionen auswählen ​

<select v-model="selected">
  <!-- inline object literal -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model unterstützt auch Wertbindungen von Nicht-String-Werten! Im obigen Beispiel wird, wenn die Option ausgewählt ist, selected auf den Objektliteralwert von { number: 123 } gesetzt.

Modifikatoren ​

.faule ​

Standardmäßig synchronisiert v-model die Eingabe mit den Daten nach jedem Eingabe-Ereignis (mit Ausnahme der IME-Komposition als oben genannt). Sie können den Modifikator lazy hinzufügen, um stattdessen nach Change-Ereignissen zu synchronisieren:

<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" />

.Zahl ​

Wenn Sie möchten, dass Benutzereingaben automatisch als Zahl eingegeben werden, können Sie den Modifikator Zahl zu Ihren von v-model verwalteten Eingaben hinzufügen:

<input v-model.number="age" />

Wenn der Wert nicht mit parseFloat() geparst werden kann, wird stattdessen der Originalwert verwendet.

Der Modifikator Zahl wird automatisch angewendet, wenn die Eingabe type="number" hat.

.trimmen ​

Wenn Sie möchten, dass Leerzeichen aus Benutzereingaben automatisch abgeschnitten werden, können Sie den Modifikator trim zu Ihren v-model-verwalteten Eingaben hinzufügen:

<input v-model.trim="msg" />

v-model mit Komponenten ​

Wenn Sie noch nicht mit den Komponenten von Vue vertraut sind, können Sie dies vorerst überspringen.

Die in HTML eingebauten Eingabetypen werden nicht immer Ihren Anforderungen gerecht. Glücklicherweise können Sie mit Vue-Komponenten wiederverwendbare Eingaben mit vollständig angepasstem Verhalten erstellen. Diese Eingaben funktionieren sogar mit v-model! Um mehr zu erfahren, lesen Sie über Usage with v-model im Handbuch der Komponenten.