(一)filters过滤器
Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤。经常用于格式化文本，比如字符全部大写，货币单位使用逗号分隔，日期形式的转换等。过滤的规则是自定义的，通过给Vue.js添加选项来设置，格式{{message|filter}}，message为要过滤的对象，filter为过滤条件
如下为一个日期的转换，把上一篇文章的日期显示成数字形式比较容易懂修改后如下
<div id='myvue'>
当前时间：{{ date |filters1}} //后面选项filters里的一个过滤函数filters1
</div>
<script src='vue.js'></script> //相对路径
<script>
var filter=function(value){
return value<10?'0'+value:value; //此过滤函数意思是如果获得的数字小于10前面就加个0变为两位数，用于后面对月份、时、分、秒进行过滤
}
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); //获取月份，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
提示:过滤器应当处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性，如有错误请指出，谢谢