Vue JS — Filters
Filters comes handy when you want to do any common text formatting. For example, you want to show First Name and Last Name of a user in Capital Case or Show just First 100 characters of a paragraph.
Lets see filters in action…
Remember, filters are used for common text formatting which implies that these are used in template where you have your text placed. v-bind or mustache interpolation
Now that we know where to use the filters, lets see what are the ways we can created filters.
Filters can be created in two ways, local filters and global filters, their types implies their purpose.
Local filter, is defined in a specific component and remains in scope with in that component.
among with other options of a component such as directive, created, computed, filters is also another option. Above is an example for a filter to limit Text for 100 characters.
which would show the first 100 characters of the text followed by ellipse …
Similarly you can create filters like Upper Case, Capitalize
The other way to register a filter so that you can share it among components is by creating a global filter.
By registering the filter to vue instance, its available to all the components.
Remember, When the global filter has the same name as the local filter, the local filter will be preferred.
Happy Coding!
Interested in knowing Property Validation in vue js
