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

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

高洛峰

Freigeben： 2016-12-03 10:32:51

Original

1266 Leute haben es durchsucht

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}}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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">

Nach dem Login kopieren

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

Nach dem Login kopieren

2 >

Dynamische Auswahloptionen

<input type="radio" v-model="pick" exp="a">
// 被选中时：
vm.pick === vm.a

Nach dem Login kopieren

Wenn Sie Listenoptionen für ein

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; }
]

Nach dem Login kopieren

< gerendert 🎜>

1. Optionsgruppe

Darüber hinaus kann das Format der Objekte im Array auch {label:'', Optionen:[...]} sein. Solche Daten werden in eine gerendert:

<select>
 <option value="a">A</option>
 <option value="b">B</option>
</select>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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