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>
原文：http://www.cnblogs.com/sun927/p/7265385.html