So verwenden Sie Filter zum Verarbeiten von Daten in Vue

Vue ist ein Front-End-Framework, das auf dem MVVM-Muster basiert. Es verfügt über Funktionen wie bidirektionale Datenbindung, Komponentisierung und Modularisierung und bietet Entwicklern großen Komfort. In Vue ist der Filter ein sehr praktisches Werkzeug, das eine Reihe von Verarbeitungen und Konvertierungen an den Daten durchführen und dann die verarbeiteten Daten anzeigen kann. Dadurch kann die Codemenge effektiv reduziert und die Lesbarkeit und Wartbarkeit verbessert werden . In diesem Artikel wird erläutert, wie Sie Filter zum Verarbeiten von Daten in Vue verwenden.

1. Definition und Anwendung von Filtern

Ein Filter kann als Funktion verstanden werden, die zum Verarbeiten eines oder mehrerer Parameter verwendet wird, bestimmte Konvertierungen und Operationen an den Daten durchführt und schließlich Verarbeitet zurückgibt Ergebnisse. Filter in Vue werden mit der Syntax {{}} aufgerufen, und Filter können über das Pipe-Zeichen „|“ in der Vorlage aufgerufen werden.

Zum Beispiel:

<div>{{ message | uppercase }}</div>

Im obigen Code wenden wir den ucapher-Filter auf die Nachrichtendaten an und wandeln die Daten zur Ausgabe in Großbuchstaben um.

2. Definition und Registrierung von Filtern

Die Verwendung von Filtern in Vue erfordert zunächst die Definition und Registrierung von Filtern, was durch die Vue.filter-Methode erreicht wird.

Zum Beispiel:

Vue.filter('uppercase', function (value) {
  return value.toUpperCase()
})

Im obigen Code definieren wir einen Filter mit dem Namen „uppercase“, der einen Parameterwert empfängt, den Wert in Großbuchstaben umwandelt und schließlich das konvertierte Ergebnis zurückgibt.

Nachdem der Filter definiert ist, müssen wir ihn bei der Vue-Instanz registrieren, um ihn in der Vorlage verwenden zu können. Zum Beispiel:

<div>{{ message | uppercase }}</div>

3. Filterparameter und die Verwendung mehrerer Filter

Filter in Vue können einen oder mehrere Parameter akzeptieren. Verwenden Sie beispielsweise einen Filter, der zwei Dezimalstellen anzeigt:

Vue.filter('fixed', function (value, n) {
  return value.toFixed(n)
})

Above Im Code definieren wir ein Filter mit dem Namen „fixed“, der zwei Parameter „value“ und „n“ empfängt, wobei n die Anzahl der Nachkommastellen darstellt. Wenn Sie Filter in Vorlagen verwenden, müssen Sie zwei Parameter übergeben, zum Beispiel:

<p>{{ price | fixed(2) }}</p>

In Vue können Sie auch mehrere Filter verwenden. Zum Beispiel möchten wir einen Namen in Großbuchstaben umwandeln und gleichzeitig die ersten drei Zeichen abfangen:

Vue.filter('uppercase', function(value) {
  return value.toUpperCase()
})
Vue.filter('truncate', function(value, length) {
  if (value.length > length) {
    return value.substring(0, length - 1) + '...'
  } else {
    return value
  }
})

Im obigen Code haben wir jeweils zwei Filter definiert, einen, um Großbuchstaben in Großbuchstaben umzuwandeln, und einen Zum Abfangen werden die ersten drei Zeichen abgeschnitten. Die Ausführungsreihenfolge der Filter ist von links nach rechts. Wir können beispielsweise zwei Filter auf folgende Weise kombinieren:

<p>{{ name | uppercase | truncate(3) }}</p>

Lokale Filter und globale Filter

In Vue können wir lokale und globale Filtergeräte definieren. Lokale Filter können nur auf Vorlagen in der aktuellen Vue-Instanz angewendet werden, während globale Filter in allen Vue-Instanzen verwendet werden können.

Definieren Sie einen lokalen Filter:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    uppercase: function (value) {
      return value.toUpperCase()
    }
  }
})

Im obigen Code definieren wir einen lokalen Filter mit dem Namen Großbuchstaben in der Vue-Instanz.

Definieren Sie einen globalen Filter:

Vue.filter('uppercase', function (value) {
  return value.toUpperCase()
})

Im obigen Code verwenden wir die Vue.filter-Methode, um einen globalen Filter mit dem Namen „uppercase“ zu definieren. Dieser Filter kann in allen Vue-Instanzen verwendet werden.

Verwenden Sie globale Filter:

<p>{{ name | uppercase }}</p>

5. Zusammenfassung

Der Filter in Vue ist ein sehr praktisches Werkzeug. Er kann eine Reihe von Verarbeitungen und Konvertierungen für Daten durchführen, und die angezeigten Daten entsprechen eher unseren Anzeigeanforderungen. In diesem Artikel erklären wir ausführlich, wie Filter zum Verarbeiten von Daten in Vue verwendet werden, einschließlich Filterdefinition, Registrierung, Parameter, Verwendung mehrerer Filter, lokaler Filter und globaler Filter usw. Ich glaube, dass dieser Artikel für Front-End-Entwickler hilfreich sein wird. Wenn Sie mehr über Vue erfahren möchten, können Sie sich die offizielle Vue-Dokumentation ansehen und bessere Vue-Lernmaterialien und Erfahrungen teilen. Ich hoffe, Sie können Ihre Begeisterung für das Frontend beibehalten und mit der Zeit gehen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Filter zum Verarbeiten von Daten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!