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>...
