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