Grundlegendes VUE3-Tutorial: Verwenden von Filtern zur Datenfilterung

VUE3 ist derzeit ein beliebtes Framework in der Front-End-Entwicklung. Die von ihm bereitgestellten Grundfunktionen können die Effizienz der Front-End-Entwicklung erheblich verbessern. Unter diesen sind Filter ein sehr nützliches Werkzeug in VUE3. Mithilfe von Filtern können Daten einfach gefiltert, gefiltert und verarbeitet werden.

Was sind also Filter? Einfach ausgedrückt sind Filter in VUE3 Filter. Sie können zur Verarbeitung der gerenderten Daten verwendet werden, um wünschenswertere Ergebnisse auf der Seite zu präsentieren. Filter sind Funktionen, die in Vorlagen verwendet werden können. Sie geben verarbeitete Ergebnisse zurück, indem sie Daten und einige Parameter übergeben. Tatsächlich können viele Vorgänge in unserer täglichen Entwicklung durch Filter vereinfacht werden.

Lernen wir, wie man Filter zum Filtern von Daten verwendet.

Zuerst müssen wir ein Filterattribut in der VUE3-Instanz definieren. Wir können in diesem Attribut mehrere Funktionen als unsere Filter definieren. Nachfolgend finden Sie ein einfaches Beispiel. Im Beispiel verwenden wir die Filterfunktion von VUE3, um die Eingabedaten in Großbuchstaben umzuwandeln:

<div id="app">
    <input type="text" v-model="input">
    <p>输出结果：{{input | uppercase}}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
        return {
          input: ''
        }
      },
      filters: {
        uppercase(val) {
          return val.toUpperCase();
        }
      }
    })

    app.mount('#app')
</script>

Im obigen Beispiel verwenden wir zunächst das V-Modell, um die Daten eines Eingabe-Tag-Sets zu binden auf das in unserer Instanz definierte Eingabeattribut. Anschließend wird auf der Seite mit dem Namen in Großbuchstaben auf einen Filter verwiesen. Schließlich wird in der VUE3-Instanz eine Großbuchstaben-Filterfunktion definiert. Die Hauptfunktion dieser Funktion besteht darin, Zeichen in Großbuchstaben umzuwandeln.

Hier ist zu beachten, dass wir mehrere Funktionen in Filtern definieren können. Gleichzeitig können wir auch mehrere Filter im selben Tag verwenden. Die Methode besteht darin, einen vertikalen Balken und den nächsten Filter nach dem Filternamen hinzuzufügen . Klicken Sie einfach auf den Gerätenamen.

Zusätzlich zur String-Konvertierung im obigen Beispiel können Filter auch zum Formatieren von Datentypen wie Datumsangaben, Währungen, Zahlen usw. verwendet werden. Beispielsweise können wir eine Filterfunktion verwenden, um Zeitstempel in das Standardzeitformat umzuwandeln. Der Code lautet wie folgt:

<p>输出结果：{{time | timestampToDate}}</p>

...

filters: {
    timestampToDate(val) {
      const date = new Date(Number(val));
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month}-${day}`;
  }
}

Wir können auch eine spezielle Logik durch Filter implementieren, z. B. Preisnachlässe:

<p>输出结果：{{price | discount(0.8)}}</p>

...

filters: {
    discount(val, discountRate) {
      return val * discountRate;
  }
}

Wie im obigen Code gezeigt Die Rabattfunktion in Filtern unterscheidet sich etwas vom vorherigen Beispiel. Sie verwendet zwei Parameter. Geben Sie bei Verwendung in der Vorlage den Rabattsatz in die zweite Klammer ein. Dem Implementierungseffekt nach zu urteilen, ersetzen die übergebenen Parameter den Wert von val in der Filterfunktion.

Zusammenfassend lässt sich sagen, dass mit VUE3-Filtern Daten problemlos verarbeitet werden können, sodass die Formatierung und logische Verarbeitung von Seitendaten schnell implementiert werden kann. In der tatsächlichen Entwicklung können wir nach Bedarf mehrere verschiedene Filterfunktionen definieren, um die Datenverarbeitung effizienter und bequemer abzuschließen.

Das obige ist der detaillierte Inhalt vonGrundlegendes VUE3-Tutorial: Verwenden von Filtern zur Datenfilterung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!