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

--

--

--

Front End Engineer | Netherlands. They say being human means having doubts yet still continuing on your path, so as I am. www.santhoshkumar.tech

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Hook useState() Example

Headless CMS: Enable In-Context Preview and Editing in an External Application

Server-Sent Events

How to copy by value a composite data type in JS?

COBOL INSPECT Statement, COBOL string-manipulation guide.

Inspect statement in COBOL, COBOL Tutorial, Inspect with replacing

Top 10 Bootstrap 4 Answers

How To Run NodeJS APIs on AWS App Runner

Important Links * Join Us! 💬

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Santhoshkumar Ravi

Santhoshkumar Ravi

Front End Engineer | Netherlands. They say being human means having doubts yet still continuing on your path, so as I am. www.santhoshkumar.tech

More from Medium

Multiple Checkboxes in Vue Vuetify

Use NUXT with PNPM

Agiloo | Made with Vue JS

Complete Guide Vue 3 — Composition API