在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)
这里的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
所共享了。