Verwendung von Vue-Filtern und Probleme bei der Zeitstempelkonvertierung

Dieser Artikel wird von der Huawei Cloud Community „Beherrschen Sie Vue-Filter und Zeitstempelkonvertierung in drei Minuten“, Autor: Aurora Night, geteilt. .

1. Das Konzept schnell erkennen:

Hallo zusammen, Vue-Filter sind allgemein bekannt. Im Folgenden werde ich Ihnen anhand des Beispiels der Zeitstempelkonvertierung zeigen, wie Sie Filter schnell verwenden können ~

Laut der offiziellen Erklärung können Sie mit Vue.js Filter anpassen, die für einige gängige Textformatierungen verwendet werden können. Filter können an zwei Stellen verwendet werden: Interpolation mit doppelten geschweiften Klammern und V-Bind-Ausdrücken (letzteres wird seit 2.1.0+ unterstützt). Filter sollten am Ende eines JavaScript-Ausdrucks hinzugefügt werden, gekennzeichnet durch das „Pipe“-Symbol.

Einfach ausgedrückt: Definieren Sie eine Verarbeitungsfunktion im Filterfilter, schreiben Sie den Funktionsnamen nach dem Pipe-Zeichen „|“ und diese verarbeitet die benutzerdefinierten Daten vor dem Pipe-Zeichen „|“ und die benutzerdefinierten Daten werden automatisch zu den Parametern der Filterfunktion.

<!-- in doppelten geschweiften Klammern -->
{{ Nachricht | Großschreibung }}

<!-- In `v-bind` -->
<div v-bind:id="rawId | formatId"></div>

Filter können hauptsächlich in lokale und globale Filter unterteilt werden, siehe die ausführliche Einführung weiter unten.

2. Lokaler Filter:

1. Ein lokaler Filter ist ein Filter, der in den Optionen einer Komponente definiert ist und nur für diese Komponente verfügbar ist. In unserer allgemeinen Entwicklung gibt das Zeit-Backend normalerweise nur einen Zeitstempel zurück, den das Frontend selbst verarbeiten kann. Im Folgenden wird beispielsweise ein Filter definiert, der den Zeitstempel in ein Datumsformat konvertiert (beachten Sie die Schritte):

<Vorlage>
  <div>
    <!-- 4. Daten rendern und Filter setzen-->
    {{ mal | Umrechnung }}
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      // 1. Simulieren Sie einen Zeitstempel der Datenzeiten: 1616959086000,
    };
  },
  // 2. Filter definieren: {
    // 3. Definieren Sie eine Verarbeitungsfunktion, der Parameterwert ist die zu verarbeitende Datenkonvertierung: Funktion (Wert) {
      //Rufen Sie die Date-Methode auf, um den Zeitstempel zu verarbeiten. return new Date(value).toLocaleString();
    },
  },
};
</Skript>

Im Ergebnis war die Konvertierung erfolgreich:

2. Darüber hinaus können Filter auch in Reihe geschaltet werden, d. h. Sie können mehrere Filter definieren. Beispielsweise entspricht Folgendes der Verwendung der Konvertierungsfunktion zum Verarbeiten der Zeitdaten, um das Ergebnis zu erhalten, und der anschließenden Verwendung der Funktion againChange zum Verarbeiten des vorherigen Ergebnisses, um das Endergebnis zu erhalten:

 {{ mal | Umrechnung | nochmalÄndern }}

Die grundlegende Demonstration ist wie folgt:

<Vorlage>
  <div>
    <!-- 5. Filter hinzufügen-->
    {{ mal | Umrechnung | nochmalÄndern }}
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      // 1. Simulieren Sie einen Zeitstempel der Datenzeiten: 1616959086000,
    };
  },
  // 2. Filter definieren: {
    // 3. Definieren Sie eine Verarbeitungsfunktion, der Parameterwert ist die zu verarbeitende Datenkonvertierung: Funktion (Wert) {
      //Rufen Sie die Date-Methode auf, um den Zeitstempel zu verarbeiten. return new Date(value).toLocaleString();
    },
    //4. Definieren Sie einen weiteren Filter und fügen Sie vor den Daten erneut die Wörter "Time is:" einChange: function (value) {
      return "Zeit ist: " + Wert;
    },
  },

};
</Skript> 

3. Gleichzeitig können Filter auch Parameter empfangen. Wir verbessern beispielsweise das Beispiel im ersten Punkt, konvertieren den Zeitstempel in ein vorgebbares Zeitformat und verwenden das gewünschte Zeitformat als Filterparameter. Die konkrete Verwendung ist wie folgt (beachten Sie die Schritte):

<Vorlage>
  <div>
    <!-- 4. Filter hinzufügen, Parameter übergeben und die Zeit im angegebenen Format zurückgeben-->
    {{ times | conversion("jjjj-MM-tt HH:mm:ss Woche w") }}
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      // 1. Simulieren Sie einen Zeitstempel der Datenzeiten: 1616959086000,
    };
  },
  // 2. Filter definieren: {
    // 3. Definieren Sie eine Verarbeitungsfunktion. Der Parameterwert stellt die zu verarbeitenden Daten dar und das Format stellt die Konvertierung der eingehenden Parameter dar: function (value, format) {
      //Diese Konvertierungsmethode wird nicht vorgestellt. Schauen Sie einfach nach. Die Filterverwendung ist die Hauptvariable date = new Date (value);
      Funktion addZero(Datum) {
        wenn (Datum < 10) {
          gibt "0" + Datum zurück;
        }
        Rückreisedatum;
      }
      lass getTime = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear() % 100,
        MM: addZero(date.getMonth() + 1),
        M: date.getMonth() + 1,
        dd: addZero(Datum.getDate()),
        d: datum.getDate(),
        HH: addZero(date.getHours()),
        H: date.getHours(),
        hh: addZero(date.getHours() % 12),
        h: date.getHours() % 12,
        mm: addZero(date.getMinutes()),
        m: date.getMinutes(),
        ss: addZero(date.getSeconds()),
        s: date.getSeconds(),
        w: (Funktion () {
          let a = ["日", "MON", "DI", "MI", "DO", "FR", "SA"];
          gib ein [Datum.getDay()] zurück;
        })(),
      };
      für (lass i in getTime) {
        format = format.replace(i, getTime[i]);
      }
      Rückgabeformat;
    },
  },

};
</Skript>

Die Ergebnisse sind wie folgt:

3. Globaler Filter:

Da es global heißt, ist es naheliegend, den Filter global zu definieren, bevor die Vue-Instanz erstellt wird. Nach der Konfiguration können ihn alle Komponenten direkt verwenden. Es wird normalerweise in einer benutzerdefinierten Datei definiert. Beispielsweise wird der obige Filter, der Zeitstempel verarbeitet, wie folgt verwendet:

1. Definieren Sie einen Filterordner im src-Verzeichnis und definieren Sie eine Filter.js-Datei im Ordner:

2. Der Code der Datei filters.js lautet wie folgt:

const Konvertierung = Funktion (Wert, Format) {
      var date = neues Datum(Wert);
      Funktion addZero(Datum) {
        wenn (Datum < 10) {
          gibt "0" + Datum zurück;
        }
        Rückreisedatum;
      }
      lass getTime = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear() % 100,
        MM: addZero(date.getMonth() + 1),
        M: date.getMonth() + 1,
        dd: addZero(Datum.getDate()),
        d: datum.getDate(),
        HH: addZero(date.getHours()),
        H: date.getHours(),
        hh: addZero(date.getHours() % 12),
        h: date.getHours() % 12,
        mm: addZero(date.getMinutes()),
        m: date.getMinutes(),
        ss: addZero(date.getSeconds()),
        s: date.getSeconds(),
        w: (Funktion () {
          let a = ["日", "MON", "DI", "MI", "DO", "FR", "SA"];
          gib ein [Datum.getDay()] zurück;
        })(),
      };
      für (lass i in getTime) {
        format = format.replace(i, getTime[i]);
      }
      Rückgabeformat;
    }
  exportieren {
    Konvertierung //Methode hier exportieren}

3. Führen Sie globale Filter in main.js ein:

Das Format zum Einstellen des globalen Filters ist Vue.filter('Filtername', entsprechende Verarbeitungsfunktion);

importiere {conversion} aus './filters/filters.js'
Vue.filter('Konvertierung', Konvertierung);

4. Kann direkt in einer Komponente verwendet werden:

<Vorlage>
  <div>
    <!-- 2. Fügen Sie den Filter hinzu und übergeben Sie die Parameter an die angegebene Zeit im Format-->
    {{ times | conversion("jjjj-MM-tt HH:mm:ss Woche w") }}
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      // 1. Simulieren Sie einen Zeitstempel der Datenzeiten: 1616959086000,
    };
  },
};
</Skript>

Gleiches Ergebnis:

4. Verlängerung:

Es lässt sich feststellen, dass Filter in ihrer Verwendung berechneten Eigenschaften gewissermaßen ähneln. Worin besteht also der Unterschied zwischen ihnen?

• Filter können Parameter übergeben, aber nicht darauf zugreifen. Keine Caching-Funktion. Gleichzeitig ist eine Vorschaltung von Filtern möglich. Kann lokal und global eingestellt werden. Filter sind relativ einfach und werden nur ausgelöst, wenn sie explizit aufgerufen werden. Sie werden im Allgemeinen beim Rendern von Vorlagen verwendet.
• Computed kann keine Parameter übergeben, kann aber auf dies zugreifen, was für Operationen mit Variablen vorgesehen ist. Die dahinter stehende Verarbeitungslogik ist relativ komplex, verfügt über Caching-Funktionen und ist innerhalb der Komponenten universeller, sodass sie sich für komplexe Datenkonvertierungen, Statistiken und andere Szenarien eignet.

5. Zusammenfassung:

Das Obige ist der allgemeine Inhalt des Filterfilters. Im Allgemeinen können Filter in lokale Filter und globale Filter unterteilt werden. Lokale Filter sind innerhalb einer Komponente gültig und globale Filter sind für jede Komponente gültig. Darunter können Sie mehrere Filter festlegen und Parameter an die Filter übergeben. Im Allgemeinen werden Filter auf eine einfache Datendarstellung angewendet.

Dies ist das Ende dieses Artikels über Vue-Filter und Zeitstempelkonvertierung. Weitere Informationen zu Vue-Filtern und Zeitstempelkonvertierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!