前言
Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化，比如字母的大写、日期的格式化。vue1.x版本有系统自带过滤器，vue2.x之后完全需要自定义，没有自带过滤器。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。
全局定义
我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。它接收两个参数：过滤器的名称 、过滤器函数。
Vue.filter('过滤器名称',函数(要过滤的元数据,参数1,参数n){
过滤器的功能
return 过滤的结果
})
使用
<p>{
{ msg | msgFormat }</p>
v-bind:属性="数据 | 过滤器名(参数1,参数2)"
-
管道符前面的
msg：要把msg这段文本进行过滤， -
管道符后面的
msgFormat：是通过msgFormat这个过滤器进行来操作。
自定义私有过滤器
私有过滤器：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。
举例：日期格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
{
{ time }}
<br />
{
{ time | datefmt }}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
time: new Date()
},
//在某一个vue对象内部定义的过滤器称之为私有过滤器，
//这种过滤器只有在当前vue对象el指定的监管的区域有用
filters: {
// input是自定义过滤器的默认参数，input的值永远都是取自于 | 左边的内容
datefmt: function (input) {
// 定义过滤器的内容：将input的值格式化成 yyyy-MM-dd 字符串输出
var res = '';
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
res = year + '-' + month + '-' + day;
return res;
}
}
});
</script>
</html>
上面的代码中，我们在vue实例中，通过filters关键字，在里面定义了一个局部过滤器datefmt。
运行结果：
第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date，说明过滤器是起到了作用的。
自定义指令和过滤器的使用场景区别
1、相同点：自定义指令和过滤器都是封装
2、不同的：
1）、自定义指令使用在，dom操作上
2）、过滤器使用在：不需要做逻辑处理，只做数据(格式）转换。用的很少与，因为没多少必要
小知识
过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器。