vue(2) -- 过滤器

1、vue 提供的过滤器

debounce  配合事件，延迟执行

<div id="box">
    <input type="text" @keyup="show | debounce 200">
</div>

<script>
    new Vue({
        el:"#box",
        data:{
        },
        methods:{
            show:function (){
                alert(1);
            }
        }

    })
</script>

（ 每隔0.2秒触发一次事件）

2、数据配合使用过滤器

limitBy : 取几个   从哪开始

<div id="box">
　　<li v-for="item in arr | limitBy 1 arr.length-1">
　　　　{{item}}
　　</li>
</div>

<script>
	new Vue({
	　　el:"#box",
	　　data:{
		arr:[1,2,3,4,5]
	　　},
	　　methods:{}
	})
</script>

filterBy :过滤数据

<div id="box">
　　<input type="text" v-model="msg" />
　　<li v-for="item in arr | filterBy msg">
　　　　{{item}}
　　</li>
</div>

<script>
　　new Vue({
　　　　el:"#box",
　　　　data:{
	　　arr:[‘width‘,‘height‘,‘background‘,‘orange‘],
　　　　　　　msg:""
	},
	methods:{}
	})
</script>

orderBy :排序

orderBy 1 是正序

-1 是倒序

　　　随便一个名字就按名字的顺序

<div id="box">
    <li v-for="item in arr | order 1">
        {{item}}
    </li>
</div>

<script>
    new Vue({
        el:"#box",
        data:{
            arr:[‘width‘,‘height‘,‘background‘,‘orange‘],
        },
        methods:{
        }
    })
</script>

3、自定义过滤器

Vue.filter(name,function(参数){

})

<div id="box">
　　{{a| toDou}}
</div>

<script>
	Vue.filter(‘toDou‘,function(input){
		return input<10?‘0‘+input:‘‘+input;
	});

	new Vue({
		el:"#box",
		data:{
			a:"9"
		},
		methods:{

		}

	})
</script>