Vue学习之路四——过滤器filter

文章目录

• 组件中定义过滤器
• 全局定义过滤器
• 串联过滤器

今日学习开始

Vue没有内置的过滤器，但是提供了api允许我们自定义过滤器。

1. 过滤器用于何处

1.双花括号之中，通过 管道符号 | 连接
2.v-bind表达式中（2.1.0+）

	//花括号中
	{{ message | capitalize }}
	
	// v-bind中
	<div v-bind: id = 'rawId | formatId '></div>

2. 组件内过滤器

组件内过滤器通过在选项filters中定义

	<div id = 'app'>
		<input type = 'text' v-model = 'message'>
		{{ message | capitalize }}
	</div>

	var vm = new Vue({
		el: 'app',
		data: {
			message: ''
		},
		filters: {
			capitalize: function(val) {
				if (!val) return '';
				val = val.toString();
				return val.charAt(0).toUpperCase() + val.slice(1);
			}
		}
	});

3. 全局过滤器

全局过滤器通过Vue.filter()中定义

	Vue.filter('capitalize', function(val) {
		if (!val) return '';
		val = val.toString();
		return val.charAt(0).toUpperCase() + val.slice(1);
	});

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。

4. Vue.filter()

用法：注册或获取全局过滤器。

	//注册
	Vue.filter('my-filter', function() {
		.....do something
	});
	
	//获取
	let myFilter = Vue.filter(my-filter);
	

5. 串联过滤器

	{{ message | filterA | filterB}}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数，因此可以接收参数：

	{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。