<div id="app">
  <div>Amount: {{ amount | currencyFormat }}</div>
  <div v-for="date in dates" :key="date">
    {{ date | moment('LLLL') }}
  </div>
  <table>
    <thead>
      <tr>
        <th>Author</th>
        <th>Title</th>
      </tr>
    </thead>
    <tr v-for="post in posts" :key="post.id">
      <td>{{ post.author_id | authorLookup(authors) }}</td>
      <td>{{ post.title }}</td>
    </tr>
  </table>
</div>
new Vue({
  el: '#app',
  data() {
    return {
      amount: 25.24323,
      dates: [
        '2018-01-01',
        '2018-01-02',
        '2018-01-03',
        '2018-01-04',
        '2018-01-05'
      ],
      authors: [
        { id: 1, name: 'Rob' },
        { id: 2, name: 'Todd' },
        { id: 3, name: 'Ray' }
      ],
      posts: [
        { id: 1, author_id: 3, title: "Want A Thriving Business? Focus On kittens!"},
        { id: 2, author_id: 2, title: "3 Ways To Have (A) More Appealing kitten"},
        { id: 3, author_id: 1, title: "How To Lose Money With Cats"},
        { id: 4, author_id: 1, title: "What Your Customers Really Think About Your Cats?"},
        { id: 5, author_id: 3, title: "3 Ways To Master Cats Without Breaking A Sweat"},
        { id: 6, author_id: 2, title: "Death, Cats And Taxes"},
        { id: 7, author_id: 1, title: "3 Simple Tips For Using Cats To Get Ahead Your Competition"}
      ]
    }
  },
  filters: {
    moment(value, format) {
      return new moment(value).format(format)
    },
    authorLookup(value, authors) {
      return authors.filter((author) => {return author.id === value})[0].name
    },
    currencyFormat (value) {
      if (!value) return ''
      return '$' + parseFloat(value).toFixed(2)
    }
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js