Vue methods中使用Filter

[ly2011]

Vue methods中使用Filter

Vue中Filter声明方式

Vue中存在两种生命Filter过滤器的方式：

• 全局过滤器

Vue.filter('formatDate', val => {
  console.log('全局过滤器', val)
})

这种方式将过滤器声明到了Vue类型上，所有Vue对象即可访问这个过滤器。

• 本地过滤器

new Vue({
  filters: {
    formatDate (val) {
      console.log('本地过滤器', val)
    }
  }
})

这种方式将过滤器声明到这个Vue对象中，所以只能在这个Vue对象中进行访问。

Vue中在Methods中访问Filter

Vue中在methods中访问Filter有两种方式，分别对应两种Filter的声明方式

• 访问全局过滤器

Vue.filter('formatDate', val => {
  console.log('全局过滤器', val)
})

new Vue({
  el: '#app',
  methods: {
    getGlobal () {
      // 使用Vue.Filter()方式获取全局过滤器
      let formatDate = Vue.filter('formatDate')
      // 调用全局过滤器
      formatDate('filter')
    }
  }
})

• 访问本地过滤器

new Vue({
  el: '#app',
  filters: {
    formatDate (val) {
      console.log('本地过滤器', val)
    }
  },
  methods: {
    getLocal () {
      // 使用this.$options.filters[] 方式获取本地过滤器
      let formatDate = this.$options.filters['formatDate']
      // 调用本地过滤器
      formatDate('filter')
    }
  }
})