Vue入门教程--过滤器的使用详解（article:10）

Vue.js 初步入门

---

细节说明

js中的数组在es6中增加了新的过滤器方法，.filter来过滤掉用户不想要的数据部分或者替换成自己想展现的数据。
vue中也为我们提供了类似的过滤器用来过滤插值表达{{}}以及其他部分的数据，且它分为全局过滤器和（私有）局部过滤器。

全局过滤器：Vue.filter('过滤器名称',function(data,arg1,arg2,...){return 过滤过程表达式});其中data表示为你要过滤的数据部分。
私有（局部）过滤器：filters{过滤器名:function(data,arg1,arg2,...){return 过滤过程表达式}}
它们的调用规则遵循就近原则，名称一致优先调用私有过滤器。
使用方法：{{数据域名称|过滤器名称(arg1,arg2,...)}}

运用详解

Vue.filter("myFilter",(data,arg)=>{
	return data.repeat(3)+arg;
});
data:{
	msg:"您好，欢迎您使用vue。"
}

<p>{{msg|myFilter('hahaha')}}</p>

过滤器中，我们将msg中的话用方法重复三遍，然后再加上自己想加入的值，效果如图所示。

下面用私有过滤器实现同样的功能。

	new Vue({
			el:'#app',
			data:{
				msg:"您好，欢迎您使用vue。"
			},
			filters:{
				myFilter:function(data,arg){
					return data.repeat(3)+arg;
				}
			}
		});

凡是想屏蔽关键字，或者加东西或者减东西，都可以使用过滤器。

---