Vue.js muss jeden Tag die Formularsteuerungsbindung lernen

Grundlegende Verwendung

Sie können die V-Model-Direktive verwenden, um eine bidirektionale Datenbindung für Formularsteuerelemente zu erstellen. Je nach Steuerelementtyp wird automatisch die richtige Methode zum Aktualisieren des Elements ausgewählt. Auch wenn es etwas magisch ist, ist das V-Modell lediglich ein syntaktischer Zucker zum Aktualisieren von Daten zu Benutzereingabeereignissen und zur spezifischen Behandlung einiger Randfälle.

Text

<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">

Kontrollkästchen

Einzelnes Kontrollkästchen, logischer Wert:

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

Mehrere Kontrollkästchen, an dasselbe Array gebunden:

<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>
<br>
<span>Checked names: {{ checkedNames | json }}</span>

new Vue({
 el: '...',
 data: {
 checkedNames: []
 }
})

Radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

Auswählen

Einzelauswahl:

<select v-model="selected">
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

Mehrfachauswahl (gebunden an ein Array):

<select v-model="selected" multiple>
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

Dynamische Optionen, gerendert mit v-for:

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

new Vue({
 el: '...',
 data: {
 selected: 'A',
 options: [
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
 ]
 }
})

Bindungswert

Für Optionsfelder, Kontrollkästchen und Auswahlfeldoptionen ist der an das V-Modell gebundene Wert normalerweise eine statische Zeichenfolge (für Kontrollkästchen ist es ein logischer Wert):

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
 
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

Aber manchmal möchten wir einen Wert an eine dynamische Eigenschaft der Vue-Instanz binden. In diesem Fall können wir ihn mit v-bind implementieren, und der Wert dieser Eigenschaft muss nicht a sein Zeichenfolge.

Kontrollkästchen

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
 
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

Radio

<input type="radio" v-model="pick" v-bind:value="a">
 
// 当选中时
vm.pick === vm.a

Wählen Sie Optionen

<select v-model="selected">
 <!-- 对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>
 
// 当选中时
typeof vm.selected // -> &#39;object&#39;
vm.selected.number // -> 123

Parametereigenschaften

lazy

Standardmäßig befindet sich das V-Modell im Eingabeereignis To Um den Wert und die Daten des Eingabefelds zu synchronisieren, können Sie ein Lazy-Attribut hinzufügen, um es im Änderungsereignis zu synchronisieren:

1f105bc225697a23c7470670e5e53196
a13ba260253c69920fcdb35fc219c562

Zahl

Wenn Sie die Benutzereingabe automatisch in den Zahlentyp konvertieren möchten (wenn das Konvertierungsergebnis der ursprüngliche Wert ist NaN, den ursprünglichen Wert zurückgeben), können Sie eine Funktionsnummer hinzufügen:

bc3a745ade46aea43913a82bbd8501d0

debounce

debounce Legen Sie ein Minimum fest Verzögerung, jede Verzögerung der Synchronisierung des Werts und der Daten des Eingabefelds nach dem ersten Tippen. Dies ist nützlich, wenn jedes Update einen teuren Vorgang erfordert (z. B. eine Ajax-Anfrage in einer Eingabeaufforderung).

82ddc4b28363de60a9d851e978fbb3a6

Beachten Sie, dass der Debounce-Parameter das Eingabeereignis nicht verzögert: Er verzögert das „Schreiben“ der zugrunde liegenden Daten. Daher sollte vm.$watch() verwendet werden, um bei Verwendung von Debounce auf Datenänderungen zu reagieren. Wenn Sie DOM-Ereignisse verzögern möchten, sollten Sie den Debounce-Filter verwenden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website besucht.

Weitere Artikel zur Formularsteuerungsbindung, die Sie jeden Tag in Vue.js lernen müssen, finden Sie auf der chinesischen PHP-Website!