Vue实践--过滤器（Filters）

Vue过滤器用来过滤模型数据，在显示之前进行数据处理和筛选，按照特定的格式进行输出。

使用语法:{{data|filter1(参数)|filter2（参数2）}};在Vue2.0之后就没有内置过滤器了，也就是说以后的过滤器都要自己去定义;

Vue过滤器的分类：全局过滤器和局部过滤器，两者的区别：顾名思义，全局过滤器在任何一个Vue实例中均可以使用，而局部过滤器只能在该过滤器所在的Vue实例中使用。

自定义过滤器语法：

全局过滤器：Vue.filter ("过滤器名"，过滤器函数(value,[参数1，参数2，...]))；

 1.在过滤器函数中最终是要按照一定的格式return出返回值的;

 2.默认过滤器函数没有参数（默认参数value除外）因为毕竟过滤器要有操作数据嘛,这里的"参数1"，"参数2"是作为额外参数传进来的，在使用的过程中是作为第一个实参，第二个实参使用的。

局部过滤器:在Vue实例中的“filters”选项中定义。filters:{"过滤器1"：function(value){...},"过滤器2"：function(value,   
其他参数){...}},其他和全局过滤器一样。

自定义过滤器和全局过滤器的实例：

HTML部分

<div id="container" v-cloak>
<h4>{{greeting|addZero}}</h4>
<h2>{{money|currency("€")}}</h2>
<h3>当前时间为：{{currentTime|dateMo("-")}}</h3>
</div>
JS部分

// 自定义全局过滤器1；是否加0
Vue.filter("addZero",function(value){
return value>9?value:"0"+value
})
// 全局过滤器货币（带参数）；货币化
Vue.filter("currency",function(value,curSymbol){
return curSymbol+value//这里的curSymbol其实是真正的第一个参数，在应用该过滤器的时候也只需传curSymbol所对应的实参即可，value是要操作的原始数据（不算）
})
var app = new Vue({
el:"#container",
data:{
greeting:9,
money:3222,
currentTime:1213234567897
},
filters:{
// 局部过滤器
dateMo:function(value,splitSym){
var date1 = new Date(value);
var str = date1.getFullYear()+splitSym+(date1.getMonth()+1)+splitSym+(date1.getDate()>9?date1.getDate():"0"+date1.getDate())+" "+date1.getHours()+":"+date1.getMinutes()+":"+
date1.getSeconds();
return str
}
}
})
注：

1.过滤器可以串联，

2.过滤器一般用于简单的文本转换，更复杂的计算要用计算属性