Vuejs之路之--过滤器的那些事

过滤器,说实话其主要的目的就是处理文本的--将文本按照一定得格式输出出来,或者表现出来;来满足各种各样的文本需求,

按照官方的话就是:可被用作一些常见的文本转换(格式化,因为可以复用)

例如:

过滤器可以用在哪里?

两个地方:mustache 插值和 v-bind 表达式。

过滤器也是可以串联的,串联的方式也是利用管道符,顾名思义就是前一个过滤器处理好的输出作为后一个过滤器的输入

var vm = new Vue({
	el:"#container",
	data:{
		datas:"这是数据",
		abs:"qwrwqrqwrqwrqwrdsfsdfyrtytu"
	},
	filters:{
		upperCase:function(val){
			console.log(val),
			console.log(arguments[1])
			return val.toUpperCase()
		},
		addString:function(ele1,ele2){
			console.log(arguments[0],arguments[1],arguments[2])
			console.log(ele1);//返回的是表达式的值
		console.log(ele2);//返回的是实参的第一个参数
		console.log(arguments[2])//返回的是实参第二个参数
		console.log(ele1+ele2+arguments[2])
			// 在这里arguments[0],ele1永远代表的都是表达式的值(未过滤前的值),不要看你传进去的是两个参数,实际上却有三个参数
			return ele1+ele2;
			// 过滤器中的参数,第一个形参第一个值永远代表的是表达式的值(过滤前的值),从第二个值开始才是你自定义的第一个实参值,以此类推
		}
	},
	methods:{
		check:function(vals){
			alert(this.datas+vals)
		}
	}
})

还要的注意的就是过滤器,根据过滤器而定义而言,就可以知道这个函数的最终的结果一定会有返回值的,就像一个加工厂一样,有进必有出,这样才能成为真正的过滤器

1.函数的最终的结果一定会有返回值;
2.处理一些常见的文本转换;
3.总接受表达式的值 (之前的操作链的结果,说白了就是过滤之前的值) 作为第一个参数,其他的参数往后推,也就是说无论你怎么定义过滤器函数,在调用的过程中第一个参数永远是表达式的值,从第二个参数开始便是你自定义的形参了......
4.可以串联的
5.指令的缩写主要是v-on:变成了@,v-bind:变成了:,其他的也没啥


你可能感兴趣的:(javacsript,Vue)