Base
Ähnlich wie bei einer benutzerdefinierten Anweisung kann ein benutzerdefinierter Filter bei der globalen Methode Vue.filter () registriert werden, die zwei Parameter nimmt: die Filter -ID und die Filterfunktion. Die Filterfunktion nimmt den Wert als Parameter und gibt den konvertierten Wert zurück:
Vue.filter ('reverse', function (value) {return value.split (''). Reverse (). Join ('')})<!-'abc' => 'cba'-> <span v-text = "message | reverse"> </span>
Die Filterfunktion kann eine beliebige Anzahl von Parametern empfangen:
Vue.filter ('Wrap', Funktion (Wert, begin, end) {return begin + Wert + Ende})<!-'Hallo' => 'Before Hello After'-> <span v-text = "Nachricht | Wrap 'vor' '"> </span>
Bidirektionaler Filter
Derzeit verwenden wir Filter, um den Wert aus dem Modell zu konvertieren, bevor wir ihn in der Ansicht anzeigen. Es ist jedoch auch möglich, einen Filter zu definieren, der den Wert aus der Ansicht (<eingabe> Element) umwandelt, bevor er in das Modell zurückschreibt:
Vue.filter ('CurrencyDisplay', {// Modell -> Ansicht // Format den Wert vor dem Aktualisieren des `<eintrags>` Element Read: Funktion (Val) {return '$' +val.toFixed (2)}, // Ansicht -> Modell // Format den Wert vor dem Schreiben der Daten. '') return isnan (number)?Dynamische Parameter
Wenn der Filterparameter nicht in Anführungszeichen verpackt ist, wird er innerhalb des aktuellen VM -Bereichs dynamisch berechnet. Außerdem zeigt diese der Filterfunktion immer auf die VM, die es nennt. Zum Beispiel:
<input v-model = "userInput"> <span> {{msg | concat userInput}} </span> Vue.filter ('concat', Funktion (Wert, Eingabe) {// `input` ===` this.userinput` return Wert + Eingabe})Das obige Beispiel ist relativ einfach, und Sie können auch Ausdrücke verwenden, um dasselbe Ergebnis zu erzielen. Für eine komplexere Logik ist jedoch mehr als eine Anweisung erforderlich, und Sie müssen es in eine berechnete Eigenschaft oder einen benutzerdefinierten Filter einfügen.
Eingebaute Filter Filterby und OrderBy Filter/Sortieren eingehende Arrays basierend auf dem aktuellen Status der VUE-Instanz, zu der es gehört.
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.