vue.js之filter过滤器

filters 过滤器

<div id="app">		
	<input v-model="message" /></br>
	<p>{{message}}</p>
	<p>四舍五入：{{message | toFix}}</p>
	<p>保留整数：{{message | toFix | toInt}}</p>
	<p>最后求和：{{message | toInt | toInt | sum}}</p>
</div>
<script type="text/javascript">
	
	//全局注册的过滤器,必须放在Vue实例化前面 
	Vue.filter('sum',function(v){
		return v+1;
	})
	
	
	let vm = new Vue({
		el: '#app',
		data: {
			message: "2.58"
		},
		filters:{
			//实例化内部注册的过滤器
			toFix(v){
				return Number(v).toFixed(1);
			},
			toInt(v){
				return parseInt(v);
			}
		}
	})
	
</script>

管道符 | : 将 | 前面的结果作为参数传给后面的方法。

---

filter实例

<ul id="fruit">
	Filter Key<input type="text" v-model="key">
	<li v-for="item in filterShoppingList">
		{{ item }}
	</li>
</ul>
<script type="text/javascript">
	var fruit = new Vue({
		el: '#fruit',
		data: {
			shoppingList: [
				"apple", "pear", "peach", "banana", "grape", "watermelon", "orange", "lemon", "mango"
			],
			key: ""
		},
		computed: {
			filterShoppingList: function() {
				var key = this.key;
				var shoppingList = this.shoppingList;				
				return shoppingList.filter(function(item) {
					return item.toLowerCase().indexOf(key.toLowerCase()) != -1
				});
			}
		}
	})
</script>	

注：在使用filter时需要注意的是，前面调用的是需要使用filter的数组，而给filter函数传入的是数组中的每个item，也就是说filter里面的函数，是每个item要去做的，并将每个结果返回。