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 we display our test people with the appropriate data through the v-for directive, we would have to add the following code:

<template>
 <div id="app">
  <ul>
   <li v-for="person in people" v-bind:key="person.id">
    {{person.name}} {{person.dob}}
   </li>
  </ul>
 </div>
</template>

<script&gt...