Was Sie über Filter in Vue wissen müssen

Vorwort

Hallo zusammen, heute möchte ich einige Tipps zu Filtern in Vue geben.

Was ist ein Filter

Vue.js ermöglicht es Ihnen, Ihre eigenen Filter zu definieren, 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).

So verwenden Sie Filter

Globale Filter

1. In diesem Fall werden ￥ und 元 im Preis herausgefiltert.
2. Beispiel￥1999.00
3. Definieren Sie eine Methode zur Großschreibung und übergeben Sie den Wert
4. Wenn der Wert leer ist, wird eine leere Zeichenfolge zurückgegeben.
5. Andernfalls wird die Zeichenfolge "￥" "元" hinzugefügt, wobei toFixed(2) auf die angegebene Anzahl von Dezimalstellen gerundet wird.

Anwendung

//main.js
Vue.filter("großschreiben", Funktion (Wert) {
  wenn (!Wert) return "";
  return "￥" + value.toFixed(2) + "元";
});

Verwendung innerhalb doppelter geschweifter Klammern

<!-- home.vue -->
      <h1>Vue-Filter</h1>
      <p>{{ Preis | großschreiben }}</p>
      {{ 20.6664376486 | groß schreiben }}

Verwendung in V-Bind

      <h1>Vue-Filter</h1>
      <p:id="122 | Großschreibung"></p>

Lokaler Filter

Beachten Sie hierbei, dass der lokale Filter verwendet wird, wenn der globale Filter und der lokale Filter denselben Namen haben.

Lokale Filter Sie können lokale Filter in den Optionen einer Komponente definieren:

Standard exportieren {
  Name: "Index",
  Daten() {
    zurückkehren {
      Preis: 1999
    }
  },
  Filter:
    Großschreibung: Funktion (Wert) {
      wenn (!Wert) return ''
      returniere '￥' + value.toFixed(2) + '元'
    }
  }
}

Filter können in Reihe geschaltet werden

In diesem Beispiel wird filterA als Filterfunktion definiert, die ein einzelnes Argument akzeptiert. Der Wert der Ausdrucksnachricht wird als Argument an die Funktion übergeben. Rufen Sie dann weiterhin die Filterfunktion FilterB auf, die ebenfalls für den Empfang eines einzelnen Parameters definiert ist, und übergeben Sie das Ergebnis von FilterA an FilterB.

{{ Nachricht | FilterA | FilterB }}

Beachten:

1. Wenn es zwei Filter mit demselben Namen gibt, lokal und global, werden sie basierend auf dem Näherungsprinzip aufgerufen, dh der lokale Filter wird vor dem globalen Filter aufgerufen!

2. Ein Ausdruck kann mehrere Filter verwenden. Filter müssen durch Pipe-Zeichen "|" getrennt werden. Die Ausführungsreihenfolge ist von links nach rechts

Zusammenfassen

Dies ist das Ende dieses Artikels über das unverzichtbare Wissen über Filter in Vue. Weitere relevante Vue-Filterkenntnisse finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!