So erhalten Sie Formulardaten in Vue

Inhaltsverzeichnis

brauchen
Daten abrufen und übermitteln
Vorlagenfilter
Filter-Nutzungsszenarien
Zusammenfassen

brauchen

Verwenden Sie Vue, um Benutzerdaten wie folgt zu sammeln:

Bildbeschreibung hier einfügen

Daten abrufen und übermitteln

Code-Implementierung:

Binden Sie den Wert von value an das variable Attribut

v-model.trim = 'username' ; Leerzeichen an beiden Enden entfernen

v-model.number = 'age'； Wandelt die Zeichenfolge in einen numerischen Wert um

v-model.lazy = 'age' ； wird nicht sofort erfasst, sondern nach Fokuswechsel.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Formulardaten abrufen</title>
    <script src="/static/js/vue.js"></script>
</Kopf>
<Text>
    <div id="Behälter">
        <form action="" @submit.prevent="einreichen">
            <label for="username">Benutzername:</label><br>
            <input type="text" class="username" name="username" placeholder="Benutzernamen eingeben" v-model.lazy="user.username"><br>
            <label for="password">Passwort:</label><br>
            <input type="password" class='password' name="password" placeholder="Passwort eingeben" v-model="user.password"><br>
            <label for="age">Alter:</label><br>
            <!-- Typ ist Zahl, nur Zahlen sind zulässig; Eingabe ist auch eine Zeichenfolge -->
            <!-- v-model.number, konvertiere die Eingabezeichenfolge in einen numerischen Wert -->
            <input type="Nummer" name="Alter" v-model.Nummer="Benutzer.Alter"><br>
            <label for="">Geschlecht:</label>
            <!-- Abnormale Eingabe -->
            <input type="radio" name="sex" v-model="user.sex" value="female">Weiblich<input type="radio" name="sex" v-model="user.sex" value="male">Männlich<br>
            <!-- Mehrfachauswahl -->
            <label for="">Hobbys:</label>
            <input type="checkbox" v-model="user.hobby" value="pingpong">Tischtennis<input type="checkbox" v-model="user.hobby" value="basketball">Basketball<input type="checkbox" v-model="user.hobby" value="football">Fußball<br>
            <!-- Dropdown-Auswahlfeld-->
            <span>Stadt auswählen:</span><br>
            <select name="Stadt" v-model="Benutzer.Stadt" id="">
                <option value="">Wählen Sie eine Stadt aus</option>
                <option value="zz">Zhengzhou</option>
                <option value="wh">Wuhan</option>
                <option value="bj">Peking</option>
            </Auswählen>
            <br>
            <!-- Textfeld -->
            <label for="">Beschreibung:</label><br>
            <textarea name="desc" v-model="user.desc"></textarea>
            <br>
            <!-- Protokoll -->
            <input type="checkbox" name="agree" v-model="user.agree">Lesen und akzeptieren Sie die <a href="http://www.baidu.com">Benutzervereinbarung</a>
            <!-- Klicken Sie zum Senden auf die Schaltfläche-->
            <button :style="{display:'block',backgroundColor:'lightblue',}">Senden</button>
            <!-- senden -->
            <!-- <input type="submit" value="Senden"> -->
        </form>
    </div>

    <Skript>
        Vue.config.productionTip = falsch
        neuer Vue({
            el: "#container",
            Daten: {
                Benutzer: {
                    Benutzername: "",
                    Passwort: "",
                    Alter: "",
                    Geschlecht: "",
                    Hobby: [],
                    Stadt: "",
                    Beschreibung: "",
                    zustimmen: "",
                }
            },
            Methoden: {
                senden(Ereignis){
                    console.log("Formular absenden")
                    // Im Formular werden die Parameter automatisch übermittelt console.log(JSON.stringify(this.user))
                },
            },
        })
    </Skript>
</body>
</html>

Vorlagenfilter

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Vorlagenfilter</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/dayjs.min.js"></script>
</Kopf>
<Text>
    <div id="Behälter">
        <!-- Filter -->
        <span>{{ Zeit | ZeitFormatter}}</span><br>
        <!-- Der erste Parameter des Parameterübergabefilters sind immer die Pipeline-Daten-->
        <span>{{ Zeit | ZeitFormatter("JJ-MM-TT hh:mm:ss")}} </span>
        <!--Es können auch mehrere Filter in Reihe geschaltet werden-->
    </div>
    <Skript>
        Vue.config.productionTip = falsch
        //Globaler Filter, in allen Komponenten verfügbar Vue.filter("myFilter", function(value){
        	gib „globale Filterung“ zurück
        })
        neuer Vue({
            el: "#container",
            Daten: {
                Zeit: 1639579694662, //Zeitstempel, kein String},
			//Lokaler Filter, der innerhalb der Komponente Filter verwendet wird: {
                timeFormatter(Zeit, Format){
                    // Der erste Parameter if (Format) {
                        returniere dayjs(Zeit).format(Format)
                    }anders{
                        returniere dayjs(Zeit).format("JJJJ-MM-TT HH:mm:ss")
                    }
                },
            },
        })
    </Skript>
</body>
</html>

Filter-Nutzungsszenarien

1. Wird in der Interpolationssyntax verwendet

2. v-bind : Attribut = „xx|xx“

Durch die Verarbeitung einiger einfacher Operationen werden neue Daten generiert

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:

Vue implementiert die Konvertierung von Formulardaten in das JSON-Format
Tutorial zur Demonstration interaktiver Übermittlung von Vue-Formulardaten
vue fügt hinzu und bearbeitet mit demselben Formular, el-form löscht Formulardaten nach dem Absenden des Formulars
Detaillierte Erläuterung, wie Vue Werte zurückgibt, um Formulare dynamisch zu generieren und Daten zu übermitteln
Vue implementiert die Funktion zum Hinzufügen, Löschen und Ändern von Formulardaten
So verwenden Sie das Element-ui-Formular in Vue, um Daten und mehrere Bilder an das Backend zu senden
Details zur Methode von Vue zum Sammeln von Formulardaten

<<: Implementierung des Einfügens von Millionen von Datensätzen in eine MySQL-Datenbank innerhalb von 10 Sekunden

>>: Tutorial zur Verwendung des Hyperlink-Tags in HTML