Heim > Web-Frontend > js-Tutorial > Hauptteil

Vue.js muss jeden Tag die Formularsteuerungsbindung lernen

高洛峰
Freigeben: 2017-01-12 12:48:12
Original
1101 Leute haben es durchsucht

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">
Nach dem Login kopieren

Kontrollkästchen

Einzelnes Kontrollkästchen, logischer Wert:

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

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>
Nach dem Login kopieren
new Vue({
 el: &#39;...&#39;,
 data: {
 checkedNames: []
 }
})
Nach dem Login kopieren

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>
Nach dem Login kopieren

Auswählen

Einzelauswahl:

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

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
new Vue({
 el: &#39;...&#39;,
 data: {
 selected: &#39;A&#39;,
 options: [
  { text: &#39;One&#39;, value: &#39;A&#39; },
  { text: &#39;Two&#39;, value: &#39;B&#39; },
  { text: &#39;Three&#39;, value: &#39;C&#39; }
 ]
 }
})
Nach dem Login kopieren

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>
Nach dem Login kopieren

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
Nach dem Login kopieren

Radio

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

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
Nach dem Login kopieren

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:


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:

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).

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!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage