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.过滤器一般用于简单的文本转换,更复杂的计算要用 计算属性