vue.js中的过滤器和方法有什么区别？

Question

我想将时间戳转换为北京时间.我应该使用过滤器或方法来实现此功能吗？有什么区别,比如性能上的差异？

Answer 1

显示的北京时间只需在基础时间戳更改时更改.方法应该因此不被使用.而是使用计算属性或过滤器:

使用计算属性

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

在您的模板中,您可以执行以下操作:

{{ displayedTime }}

虽然此解决方案有效,但您只能将其用于一个时间戳(在本例中time).我们来看一看如何使用过滤器执行此操作:

使用过滤器

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

在您的模板中,您可以执行以下操作:

{{ time | displayedTime }}

此解决方案的优点是,如果您的应用程序中的某个位置有另一个时间戳,则可以使用相同的过滤器:

{{ otherTime | displayedTime }}

Vue.filter()如果要使此过滤器全局工作(在此Vue实例之外),请确保使用该方法.