Vue.js 2 Design Patterns and Best Practices

Filters

In this section, we're going to investigate filters; you may have come across filters before in frameworks such as Angular (Pipes). Perhaps we want to create a filter that allows us to format a date in a readable format (DD/MM/YYYY). Let's create a playground project to investigate this further:

# Create a new Vue project$ vue init webpack-simple vue-filters# Navigate to directory$ cd vue-filters# Install dependencies$ npm install# Run application$ npm run dev

If we had some test people and used the v-for directive to display them on screen, we'd get the following result:

To obtain the result shown in the preceding screenshot, where ...