Vue.js kurz & gut

KAPITEL 13

Filter

Vue ermöglicht die Erstellung von Filtern zur Formatierung von Text. Ein Filter kann innerhalb der Double-Mustache-Syntax {{ }} sowie in Ausdrücken für v-bind verwendet werden. Ein Filter sollte immer an das Ende des JavaScript-Ausdrucks gestellt werden, er wird über einen senkrechten Strich | (Pipe-Zeichen) getrennt.

Für die Double-Mustache-Syntax innerhalb von Templates lautet das Resultat also:

{{ message | capitalize }}

Mit v-bind werden Filter hingegen wie folgt genutzt:

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

Die Funktion eines Filters erhält immer den Wert des Ausdrucks beziehungsweise das Ergebnis der vorangegangenen Kette. Im ersten Beispiel erhält die Filterfunktion für capitalize also den Wert von message als ...