- [Instructor] We've already seen that we can create methods
and computer properties, but there's another way
to process data in Vue.JS,
and that is through filters.
They're pretty handy.
So, the problem I'm having right now
is that these prices come directly
from the database, and it's not always consistent
about the number formatting.
So here we just have $99,
but if we scroll, we'll see that sometimes
we'll have two digits for the format,
and on certain items, that are really cheap,
you only have like one digit right here.
So, it's not really consistent.
Let's create a filter that makes the formatting
of the numbers a little bit better.
So to do that, what I'll do is I'll break
into the JavaScript, and just like I typed
in computer properties and methods,
I can add another section here called filters.
And just like with the other ones,
that is an object and then,
let's go and hide the preview
so that it doesn't keep on reloading.
And, what I'll do, is I'll create a filter
called currency that I can use all over the place
and this is going to be a function.
Filters can accept parameters,
so I'm going to pass in a value to this filter.
And then, I will use the return statement
to go ahead and type in a dollar sign.
And plus, we'll use the number method,
and then use another JavaScript method
called parseFloat(value)
and then use toFixed with two units right here.
So what this will do, is it'll format the numbers
so that they have two decimal points.
And I misspelled function here.
So that looks good.
Now that I have that filter, I can use it in my application.
So let's go ahead and go back into the HTML
and right now I have this dollar sign right here.
And I'm using this number function,
so what I could do here is list the element
that I want to be modified by the filter
and type in a pipe character,
that's a vertical line.
On my keyboard, it's above the Return Key.
And then after that, I can type in the name of the filter.
So I'll say currency.
And let's go ahead and open this up.
And you should see that all my numbers
are formatted properly now.
A couple of things that you should know about filters,
they can be also defined outside the main Vue object.
And this is actually also true for methods.
So if I want to create a filter
that's going to apply to more than one
Vue component, or element on the page,
I can just type in Vue.filter,
or Vue.component,
and then type in the name of the filter that I want to use,
and then put in my function
just like I would for whatever method.
So I can use this in multiple Vue instances
not just in this one right here.
But, the one that I have works pretty well.
A couple of other things that you should know,
is that they can also be chained.
So if I'm calling in my HTML currency,
then I can do something else,
just hit another pipe, then type in another name
of another filter here
and it will process the currency first,
and then it'll pass the result of that
to whatever this other filter is.
Filters are also available in both mustache expressions
like this, as well as in any v-bind directives.
So we could use it, for example,
to modify this source or the alt right here.
Filters are pretty useful,
and in the same way that we can create global filters,
we can also create global components.