Detaillierte Erklärung, wie Vue den Eingabewert erhält

In diesem Artikel werden hauptsächlich relevante Informationen zur Lösung des Problems der Eingabe von Eingabewerten durch Vue vorgestellt. Ich hoffe, dass dieser Artikel jedem helfen kann, solche Probleme zu meistern alle.

Lösung für das Problem, dass Vue den Eingabewert erhält

In v-for gibt es mehrere Zeilen mit Eingabefeldern. Wie erhält Vue den Eingabewert eines bestimmten? Zeile? Schreiben Sie einfach etwas Code, was bedeutet, dass im Hintergrund eine mehrzeilige Listensammlung angezeigt wird. Wenn der Wert einer bestimmten Zeile geändert wird Eine fehlerfreundliche Eingabeaufforderung. Am Ende wird eine Schaltfläche zum Löschen der aktuellen Datenzeile hinzugefügt. Die ursprüngliche Idee besteht darin, den Wert mit v-bind:value zu binden auf der Seite kann der Wert in der Originalliste nicht geändert werden, und ref kann definitiv nicht vollständig abgerufen werden, this.$refs.itemPriceRef[], das die Werte annimmt ​​​​Alle Eingabefelder sind ein Array und können vor der Übermittlung überprüft werden. Es ist jedoch unmöglich, eine bestimmte Reihe von Operationen zu bestimmen, und Vue führt eine sehr schnelle Suche durch Ich habe jedoch keine Möglichkeit gefunden, den Wert abzurufen, indem ich den Wert in der Liste direkt mit dem V-Modell verknüpft habe Ändern, und es wird keine Eingabe geben. VUE ist sehr praktisch, wenn es darum geht, Vue zu lernen. Ich habe nicht erwartet, dass es verschwendet wird viel Zeit, aber ich habe auch viel gelernt.

PS: Drei Möglichkeiten, den Wert des Eingabefelds auf der Seite abzurufen. Die erste Methode ist die Verwendung von v-bind:value + ref. Diese Methode ist nur für bestimmte Eingabefelder geeignet

Zum Beispiel verfügt die Anmeldeseite nur über ein Konto- und Passwort-Eingabefeld

2. Diese Methode ändert den ursprünglichen Listenwert, sodass Sie beim Senden den ursprünglichen Wert durchlaufen müssen Liste, was etwas mühsam ist.

3 verwendet V-Modell + Ref, so habe ich es geschrieben. Der Unterschied zu 2 besteht darin, dass Ref beim Senden direkt verwendet wird, was sich mehr anfühlt nützlich, wenn es eine unbekannte Anzahl von Eingabefeldern gibt

Ich habe es nur beiläufig zusammengefasst. In den Augen der Meister ist es vielleicht nicht der Rede wert, aber für mich, eine Person, die gerade erst Vue gelernt hat, hat es mich verschwendet

Nehmen Sie sich etwas Zeit, um Ihren Eindruck zu vertiefen.

<p v-model="skuList" v-for="(val, key) in skuList "> 
<p> 
<p> 
<span>价格：</span> 
<span><input type="text" v-model="val.price" ref="priceRef" v-on:change="checkPrice(val)"></span>

<pre name="code" class="html"><i v-on:click="dataClearStockPrice(val)"></i>

上限： >

<span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i> 
</span></p> 
</p> 
</p>

    checkPrice:function (data) { 
    var priceReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/; 
    if(!priceReg.test(data.price)){ 
     Toast({message: "格式错误"}); 
     data.price = ""; 
    } 
   }, 
   checkStock:function (data) { 
    var totalReg = /^[0-9]*$/; 
    if(!totalReg.test(data.stock)){ 
     Toast({message: "格式错误"}); 
     data.stock = ""; 
    } 
   }， 
   dataClearStockPrice:function(data){ 
    data.price = ''; 
   }, 
   dataClearStockTotal:function(data){ 
    data.stock = ''; 
   },

Verwandte Empfehlungen:

Über die attr-Methode in jQuery- und Prop-Methode zum Abrufen der überprüften Attributoperationsmethode der Eingabe

Verschiedene Möglichkeiten für JQuery, den Wert im Eingabetyp=Text abzurufen

PHP zum Abrufen der Eingabe. Der Wert im Eingabefeld wird mit der Datenbank verglichen und angezeigt

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie Vue den Eingabewert erhält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!