suchen

Heim  >  Artikel  >  Web-Frontend  >  Vue.JS-Einführungs-Tutorial zur Verarbeitung von Formularen

Vue.JS-Einführungs-Tutorial zur Verarbeitung von Formularen

高洛峰
高洛峰Original
2016-12-03 10:32:511213Durchsuche

Das Beispiel in diesem Artikel teilt den relevanten Inhalt der Vue.JS-Formularverarbeitung als Referenz. Der spezifische Inhalt ist wie folgt:

Grundlegende Verwendung

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<form id="demo">
 <!-- text -->
 <p>
  <input type="text" v-model="msg">
  {{msg}}
 </p>
 <!-- checkbox -->
 <p>
  <input type="checkbox" v-model="checked">
  {{checked ? "yes" : "no"}}
 </p>
 <!-- radio buttons -->
 <p>
  <input type="radio" name="picked" value="one" v-model="picked">
  <input type="radio" name="picked" value="two" v-model="picked">
  {{picked}}
 </p>
 <!-- select -->
 <p>
  <select v-model="selected">
   <option>one</option>
   <option>two</option>
  </select>
  {{selected}}
 </p>
 <!-- multiple select -->
 <p>
  <select v-model="multiSelect" multiple>
   <option>one</option>
   <option>two</option>
   <option>three</option>
  </select>
  {{multiSelect}}
 </p>
 <p><pre class="brush:php;toolbar:false">data: {{$data | json 2}}

<script> new Vue({ el: &#39;#demo&#39;, data: { msg : &#39;hi!&#39;, checked : true, picked : &#39;one&#39;, selected : &#39;two&#39;, multiSelect: [&#39;one&#39;, &#39;three&#39;] } }); </script>

Lazy Update
Standardmäßig synchronisiert das V-Modell die Eingabedaten nach jedem Eingabeereignis. Sie können ein Lazy-Attribut hinzufügen, um es so zu ändern, dass die Synchronisierung erst nach dem Änderungsereignis erfolgt. 

<!-- 在 "change" 而不是 "input" 事件触发后进行同步 -->
<input v-model="msg" lazy>

In Zahl konvertieren
Wenn Sie die Benutzereingabe automatisch in eine Zahl umwandeln möchten, können Sie der Eingabe, in der sich das V-Modell befindet, ein Zahlenattribut hinzufügen. Kein Test war erfolgreich, ich weiß nicht warum

bc3a745ade46aea43913a82bbd8501d0

Bindungsausdruck
Bei Verwendung des V-Modells in a Radioauswahl Bei Verwendung von Kästchen und Kontrollkästchen kann der gebundene Wert ein boolescher Wert oder eine Zeichenfolge sein: 

<!-- toggle 是 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当单选框被选中时 pick 是 "red" -->
<input type="radio" v-model="pick" value="red">

Hier gibt es eine kleine Einschränkung – manchmal möchten wir den Wert dahinter an etwas anderes binden . Sie können es gemäß dem folgenden Beispiel implementieren:

1. Kontrollkästchen 

<input type="checkbox" v-model="toggle" true-exp="a" false-exp="b">
// 被选中时：
vm.toggle === vm.a
// 被取消选中时：
vm.toggle === vm.b

2 >

Dynamische Auswahloptionen
<input type="radio" v-model="pick" exp="a">
// 被选中时：
vm.pick === vm.a
Wenn Sie Listenoptionen für ein 221f08282418e2996498697df914ce4e-Element dynamisch rendern müssen, wird empfohlen, das Optionsattribut mit der v-model-Direktive zu verwenden, damit v -model wird korrekt sein. Synchronisierung:

e57d50fce680466b479a2f32cc4092cc18bb6ffaf0152bbe49cd8a3620346341

In Ihren Daten sollte myOptions ein A-Pfad oder Ausdruck sein, der auf ein Optionsarray zeigt.
Dieses optionale Array kann ein einfaches Array enthalten:

options = ['a', 'b', 'c']

oder ein Format wie { text:'', value:''} Objekt. Mit diesem Objektformat können Sie optionale Elemente festlegen, sodass Text anders angezeigt wird als der zugrunde liegende Wert:


wird als 
options = [
 { text: &#39;A&#39;, value: &#39;a&#39; },
 { text: &#39;B&#39;, value: &#39;b&#39; }
]

1. Optionsgruppe

Darüber hinaus kann das Format der Objekte im Array auch {label:'', Optionen:[...]} sein. Solche Daten werden in eine 5b7a15bed8615d1b843806256bebea72 gerendert: 
<select>
 <option value="a">A</option>
 <option value="b">B</option>
</select>


2. Optionsfilterung

Ihre Originaldaten haben höchstwahrscheinlich nicht das hier erforderliche Format Daher muss bei der dynamischen Generierung von Optionen eine gewisse Datenkonvertierung durchgeführt werden. Um diese Konvertierung zu vereinfachen, unterstützt das Optionsattribut Filter. Normalerweise ist es eine gute Idee, die Datentransformationslogik in einen wiederverwendbaren benutzerdefinierten Filter umzuwandeln: 
[
{ label: &#39;A&#39;, options: [&#39;a&#39;, &#39;b&#39;]},
{ label: &#39;B&#39;, options: [&#39;c&#39;, &#39;d&#39;]}
]
<select>
<optgroup label="A">
 <option value="a">a</option>
 <option value="b">b</option>
</optgroup>
<optgroup label="B">
 <option value="c">c</option>
 <option value="d">d</option>
</optgroup>
</select>


Der obige Filter sieht folgendermaßen aus: [ Rohdaten wie { name: 'Bruce' }, { name: 'Chuck' }] wird in ['Bruce', 'Chuck'] konvertiert und entspricht somit den Formatanforderungen dynamischer Optionen. 

Vue.filter(&#39;extract&#39;, function (value, keyToExtract) {
return value.map(function (item) {
 return item[keyToExtract]
})
})
<select
v-model="selectedUser"
options="users | extract &#39;name&#39;">
</select>
3. Statische Standardoption

Zusätzlich zu dynamisch generierten Optionen können Sie auch eine statische Standardoption bereitstellen:


Nach dieser statischen Option werden dynamisch generierte Optionen basierend auf Benutzern hinzugefügt. Diese Standardoption wird automatisch ausgewählt, wenn der Grenzwert des V-Modells ein anderer Dummy-Wert als 0 ist. 

<select v-model="selectedUser" options="users">
<option value="">Select a user...</option>
</select>
Eingangsentprellung

Mit der Entprellungsfunktion können Sie nach jedem Benutzerereignis eine Verzögerung festlegen, bevor ein Eingang mit dem Modell synchronisiert wird. Wenn der Benutzer vor Ablauf dieser Verzögerung erneut einsteigt, wird das Update nicht sofort ausgelöst, sondern die Wartezeit der Verzögerung wird zurückgesetzt. Dies ist nützlich, wenn Sie vor jedem Update umfangreiche Arbeiten durchführen möchten, beispielsweise eine Ajax-basierte Autovervollständigungsfunktion. Reduzieren Sie effektiv doppelte nutzlose Übermittlungen

82ddc4b28363de60a9d851e978fbb3a6

Beachten Sie, dass der Debounce-Parameter keine Benutzereingabeereignisse entprellt: Er entprellt nur die zugrunde liegenden Daten Der „Schreib“-Vorgang funktioniert. Daher sollten Sie bei Verwendung von Debounce vm.$watch() anstelle von v-on verwenden, um auf Datenänderungen zu reagieren.

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein


Stellungnahme：
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
Vorheriger Artikel：Vue.JS-Einführungs-Tutorial zum Rendern von ListenNächster Artikel：Vue.JS-Einführungs-Tutorial zum Rendern von Listen

In Verbindung stehende Artikel

Mehr sehen