What is the difference between filters and methods in vue.js?

Question

I want to convert a timestamp to Beijing time. Should I use a filter or a method to implement this feature? What's the difference, such as the difference in performance?

Answer 1

The displayed Beijing time only has to change when the underlying timestamp is changed. Methods should therefore not be used. Instead use computed properties or filters:

Using a computed property

new Vue() {
  data: {
    time: /* Your timestamp */
  },
  computed: {
    displayedTime() {
      /* Convert `this.time` to Beijing time */
    }
  }
}

In your template you can then do this:

{{ displayedTime }}

While this solution works, you can only use it for one timestamp (in this case time). Let's take a look at how you could do this with filters:

Using a filter

new Vue() {
  data: {
    time: /* Your timestamp */
  },
  filters: {
    displayedTime(timestamp) {
      /* Convert the `timestamp` argument to Beijing time */
    }
  }
}

In your template you can then do this:

{{ time | displayedTime }}

The advantage of this solution is that if you have another timestamp somewhere in your application you can use the same filter:

{{ otherTime | displayedTime }}

Make sure to use the Vue.filter() method if you want to make this filter work globally (outside of this Vue instance).