vue内置了一个很便捷的数据过滤器，它能提高我们的工作效率，减少重复代码。

特别是在后台开发中，表格中需要展示大量的字段，服务器返回的原始数据有一些并不能直接展示出来，而是需要我们前端进一步格式化，当然只有一个页面需要格式化数据的时候，我们写一遍格式化的逻辑没关系，但是有多个页面都需要用到同样的格式化逻辑的时候呢？

这时候filter的功能就派上用场了，只要全局定义一次，就能在整个项目中应用。

Vue.filter(name,fn)

• 第一个参数是过滤器的名称
• 第二个参数是过滤器调用的函数

注册过滤器有两种方式，一种是在组件内(局部)，另一种是全局(一次定义，到处使用)。

组件中注册

<template>
  <div>
    <!-- 在花括号内，在数据的后方使用'|'符号进行过滤器的使用 -->
    <!-- 在网页中显示当前年份，如2019  -->
    <div>{{ new Date | fullYearScope }}</div> 
  </div>
</template>

<script>
export default {
  filters: {
    //定义名为'fullYearScope'过滤器来格式化date对象，使其返回当前的年份
    fullYearScope: function (value) {
      return date.getFullYear();
    }
  }
}
</script>

全局注册

在new Vue....（创建vue实例）前，定义了过滤器那就表示它为全局过滤器，它就能在项目中的任何地方使用。

//注册名为‘fullYearGlobal’的全局过滤器
Vue.filter('fullYearGlobal', function(date) {
  return date.getFullYear()
})

new Vue({
  render: h => h(App)
}).$mount('#app')

然后在某个组件中进行使用：

<template>
  <div>
    <!-- 在网页中显示当前年份，如2019  -->
    <div>{{ new Date | fullYearGlobal }}</div> 
  </div>
</template>

<script>
export default {}
</script>

过滤器其实像一条管道，当该数据在该管道内流动结束后，它的形象就发生了变化，因为我们在管道内对它进行了改造，让它变为我们想要的，该管道就是改造器。
它就是：Vue.filter的第二个函数参数:

 function(date) {
  //date这个形参可以为任意名称，建议你根据其用途进行命名
  //date就是new Date()对象
  return date.getFullYear()
}

过滤器的使用就是这么简单，它还可以传递多个参数、链式调用和使用v-bind，以这个为基础，再到官网看下，其它三种你就能瞬间pick up，它真是个效率神器，在项目中为我节省了很多力气，希望你使用愉快。