Vue.js Data Binding Filters
Example
Vue.js allows you to append optional “filters” to the end of an expression, denoted by the “pipe” symbol:
{{ message | capitalize }}
Here we are “piping” the value of the message expression through the built-in capitalize filter, which is in fact just a JavaScript function that returns the capitalized value. Vue.js provides a number of built-in filters, and we will talk about how to write your own filters later.
Note that the pipe syntax is not part of JavaScript syntax, therefore you cannot mix filters inside expressions; you can only append them at the end of an expression.
Filters can be chained:
{{ message | filterA | filterB }}
Filters can also take arguments:
{{ message | filterA 'arg1' arg2 }}
The filter function always receives the expression’s value as the first argument. Quoted arguments are interpreted as plain string, while un-quoted ones will be evaluated as expressions. Here, the plain string 'arg1' will be passed into the filter as the second argument, and the value of expression arg2 will be evaluated and passed in as the third argument.
