VueJs bietet eine leistungsstarke Filter-API, die verschiedene Filterprozesse für Daten durchführen und die erforderlichen Ergebnisse zurückgeben kann. In diesem Artikel werden hauptsächlich Vue-Filterbeispiele vorgestellt.
Vue-Filter stehen im Allgemeinen am Ende von JavaScript-Ausdrücken, gekennzeichnet durch das „|“-Symbol:
Filter können unsere machen Code schöner und kann im Allgemeinen für die Zeitformatierung, die Großschreibung von Anfangsbuchstaben usw. verwendet werden.
Zum Beispiel: {{ date | dateFormat }}这 ist, wie man einen Filter schreibt; {{ dateFormat(date) }}So schreibt man einen Funktionsaufruf
Es ist ersichtlich, dass die Art und Weise, einen Filter zu schreiben, semantischer ist , sodass die Leute die Bedeutung auf einen Blick erkennen können.
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<p v-bind:id="rawId | formatId"></p>
<!-- 也可以串联多个过滤器 -->
{{ message | filterA | filterB }}// In diesem Beispiel ist filterA als Filterfunktion definiert, die einen einzelnen Parameter empfängt, und der Wert der Ausdrucksnachricht wird an übergeben Funktion als Parameter Mitte. 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
<!-- 过滤器接收参数 -->
{{ message | capitalize('string', obj) }}// Die Parameter hier beginnen mit dem zweiten Parameter in der Filterfunktion. Der erste Parameter ist die zu filternde Wertnachricht, d. h. „string“ ist der zweite Parameter und obj der dritte Parameter.
Nachdem Sie die Parameter der Filtermethode erhalten haben, können Sie eine Reihe von Verarbeitungen innerhalb der Methode durchführen und schließlich die Verarbeitungsergebnisse zurückgeben.
1. Der Filter kann
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}2 Der Filter kann auch global montiert werden Vue
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
ausführliche Erläuterung des Echarts-Maus-Overlays mit Hervorhebung von Knoten- und Beziehungsnamen
vue implementiert das Kopieren von Inhalten zum Einfügen Board-Zwischenablage-Methode
Vue-Methode zum Abrufen der aktuell aktivierten Route
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Filterinstanz des Vue-Filters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
