在Vue中并不是所有的系统过滤器都能够满足我们的需求，因此，为了方便起见，Vue允许开发人员自定义自己的过滤器。
自定义私有过滤器
- 关键字：
filters - 作用：
当我们在创建的Vue（new Vue({})）内部使用关键字filters所创建的过滤器时，由于其作用范围在该Vue的el关键字所指定的DOM内，因此我们将其称之为私有过滤器，在创建自定义过滤器时用法与data关键字相似，都是类似于下面的形式：
filters:{
key (param) {}
}
其中key是自定义过滤器的方法名，而param则是自定义过滤器的参数，其中param参数只能来源于过滤器|左边的值。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
原始时间：<br>
{{time}}
<hr>
格式化后的时间：<br>
{{time | timefmt}}
</div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
time:new Date()
}
,filters:{
timefmt(param) {
//过滤器的逻辑：将input的值格式化成yyyy-MM-dd HH:mm:ss的形式
var res = '';
var year = param.getFullYear();
var month = param.getMonth() + 1;
var day = param.getDate();
var hour = param.getHours();
var minite = param.getMinutes();
var second = param.getSeconds();
//将其拼接成格式化后的字符串
res = year + '-' + month + '-' + day + ' ' + hour + ':' + minite + ':' + second;
return res;
}
}
});
</script>
</html>
结果
分析
上面的第一个为js所创建的原始时间，该时间基本上不方便与人们去识读，因而我们一般情况下需要对该时间对象进行格式化操作。
方法二是格式化后的时间，其在filters关键字的作用域内创建一个名为timefmt的函数，该函数传入一个param，该param就是我们在time中的值，因而我们直接将其拿过来就可以进行相应的格式化操作，最后通过return返回格式化后的结果即可。
自定义全局过滤器
- 关键字：
filter - 作用：
创建全局过滤器。该创建的全局过滤器可以被多个Vue对象重复使用，而无需在Vue对象内部再重复床架，因而其大大扩展了Vue自定义过滤器的作用范围。
-
语法：
Vue.filter(String ,Function)
扫描二维码关注公众号，回复： 3805776 查看本文章
这里的Vue无需创建，其应该放在所有的Vue对象的最前面。在filter()调用方法中需要传递两个参数，第一个为自定义全局过滤器的名称，第二个为自定义过滤器的函数体。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app1">
Vue对象vm1格式化后的时间<br>
{{time | timefmt}}
</div>
<hr>
<div id="app2">
Vue对象vm2格式化后的时间<br>
{{time | timefmt}}
</div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//定义一个名称为timefmt的全局过滤器
Vue.filter('timefmt',function(param){
//过滤器的逻辑：将input的值格式化成yyyy-MM-dd HH:mm:ss的形式
var res = '';
var year = param.getFullYear();
var month = param.getMonth() + 1;
var day = param.getDate();
var hour = param.getHours();
var minite = param.getMinutes();
var second = param.getSeconds();
//将其拼接成格式化后的字符串
res = year + '-' + month + '-' + day + ' ' + hour + ':' + minite + ':' + second;
return res;
});
//Vue对象2
var vm1 = new Vue({
el:'#app1'
,data:{
time:new Date()
}
});
//Vue对象1
var vm2 = new Vue({
el:'#app2'
,data:{
time:new Date()
}
});
</script>
</html>
结果
分析
从上面的代码中，我们可以看出，Vue对象vm1监管的DOM元素为app1，而Vue对象vm2监管的DOM元素为app1。其中我们并没有在vm1与vm2中创建任何的自定义过滤器，但是在页面的展示结果中，我们看到其都可以将当前时间对象格式化成时间字符串，这说明我们自定义的全局过滤器成功的被vm1与vm2所共享了。