<div id='myvue'>
Current time: {{DATE | filters1 }} // later option filters in a filter function filters1
</div>
<Script src = 'vue.js'> </ script> // relative path
<script>
var filter=function(value){
return value <10 '0' + value: value; // This function means that after the filter is obtained if the number is less than the front 10 to add zero to two digits for the month face, hours, minutes, seconds? filter
}
myVue var = new view ({
the '# myvue'
data:{
date:new Date()
},
filters:{
filters1:function(value){
var date=new Date(value);
var year = date.getFullYear (); // Get Year
var month=filter(date.getMonth()+1); //获取月份，getMonth获取的是0-11，所以获取的时候要加上1才是真实的月份，并且对月份使用前面的filter进行数字过滤
var day=filter(date.getDay()); //获取日期
var hour=filter(date.getHours()) //获取小时
var minute=filter(date.getMinutes()); //获取分钟
var second=filter(date.getSeconds()) //获取秒
return year+'-'+month+'-'+day+'-'+hour+':'+minute+':'+second; //用适当的连接符连接返回所需要的格式
}
},
mounted:function(){
var _this=this;
var timer=setInterval(function(){
_this.date=new Date();
},1000)
console.log(this.date)
},
beforeDestroy:function(){
if(this.timer){
clearInterval(this.timer);
}
}
})
</script>
运行结果如下图
(二)过滤器串联
过滤器可以通过两个管道符进行串联，进行两次过滤，格式为{{message|filter1|filter2}},这两次过滤是传递的,先由message经过filter1得到过滤后的值然后作为参数再
传递给过滤函数2filter2再次进行过滤最后显示结果，如将上述代码修改为以下代码
<div id='myvue'>
当前时间：{{ date |filters1|filters2}}
</div>
<script src='vue.js'></script>
<script>
var filter=function(value){
return value<10?'0'+value:value;
}
var myVue=new Vue({
el:'#myvue',
data:{
date:new Date()
},
filters:{
filters1:function(value){
var date=new Date(value);
var year=date.getFullYear();
var month=filter(date.getMonth()+1);
var day=filter(date.getDay());
var hour=filter(date.getHours())
var minute=filter(date.getMinutes());
var second=filter(date.getSeconds())
return year+'-'+month+'-'+day+'-'+hour+':'+minute+':'+second;
},
filters2:function(value){
return value.split('-')[0]； //将传递过来的参数按‘-’进行分割得到一个数组，然后取数组的第一个值，也就是年份
}
},
mounted:function(){
var _this=this;
var timer=setInterval(function(){
_this.date=new Date();
},1000)
console.log(this.date)
},
beforeDestroy:function(){
if(this.timer){
clearInterval(this.timer);
}
}
})
</script>
结果如下
上面绿色的地方为改动或添加的代码，此时结果为2019，这说明date经过filters1转换为数字形式，然后作为过滤函数filters2的参再次进行过滤得到年份
(三)过滤器接受参数
格式{{meaasge|filter('arg1','arg2')}}
这里的字符串arg1和arg2将分别作为传给过滤函数的第二个第三个参数，因为第一个是数据本身(message)，如下面例子
<div id='myvue'>
成绩：{{ grade |filters1(60,80)}}
</div>
<script src='vue.js'></script>
<script>
var myVue=new Vue({
el:'#myvue',
data:{
grade:75
},
filters:{
filters1:function(value1,value2,value3){
return value1<value2?'不及格':(value1>value3?'优秀':'良好') //如果value1小于value2则输出不及格，否则再比较value1是否大于value3，如果大于则为优秀如果小于则为良好，75为良好
}
}
})
</script>
结果：
所以实参grade和过滤器的形参value1对应，60对应value2,80对应value3
提示:过滤器应当处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性，如有错误请指出，谢谢
