本文实例讲述了vue过滤器用法。分享给大家供大家参考，具体如下：
过滤器:
vue提供过滤器:
capitalize uppercase currency….
<div id="box">
{{msg|currency ￥}}
</div>debounce 配合事件，延迟执行
<div id="box">
<input type="text" @keyup="show | debounce 2000">
</div>数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始
<div id="box">
<ul>
<!--取2个-->
<li v-for="val in arr | limitBy 2">
{{val}}
</li>
<br/>
<br/>
<!--取2个，从第arr.length-2个开始取-->
<li v-for="val in arr | limitBy 2 arr.length-2">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:[1,2,3,4,5] },
methods:{
}
}).$mount('#box');
</script>filterBy 过滤数据
filterBy ‘谁’
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | filterBy a">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{
}
}).$mount('#box');
</script>orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy -1">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{
}
}).$mount('#box');
</script>自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){
});
<div id="box">
{{a | toDou 1 2}}
</div>
<script>
Vue.filter('toDou',function(input,a,b){
alert(a+','+b);
return input<10?'0'+input:''+input;
