旁观自己 善待朝夕|

猫老板的豆

园龄:9年4个月粉丝:52关注:0

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要去做的,并将每个结果返回。

这里写图片描述

本文作者:猫老板的豆

本文链接:https://www.cnblogs.com/bingcola/p/16499286.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   猫老板的豆  阅读(97)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.