转载自两个地方
1.点击阅读原文
2.点击阅读原文

1.基本概念

过滤器提供了一种执行文本转换的方法，比如说都转成大写字母或者几乎做任何我们想做的事情。过滤器既可以在文本插值中使用，也可以在[v-bind指令]

Vue中的过滤器不能替代Vue中的methods、computed或者watch，因为过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。

转载 阅读原文请点击

2.注册过滤器两种方式

使用Vue,可以有两种不同的方式注册过滤器：全局（一次定义到处使用）和本地过滤器。你可以跨所有组件访问全局过滤器，而本地过滤器只允许你在其定义的组件内部使用。

Vue.filter(name,fn)

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

1. 组件内注册

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

2. 全局注册
在new 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的函数的第二个参数: