文章目錄

• 元件中定義過濾器
• 全域性定義過濾器
• 串聯過濾器

今日學習開始

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 的值作為第三個引數。