过滤器是个啥？
使用vue的时候，绑定数据时超级方便的，只需要 {{message}}这样既可，但是有时候我们也有些特殊的需求，比如
<div id='app'>
<div v-for="number in numbers">{{number}}</div>
</div>
var vm=new Vue({
el:"#app",
data:{
msgs:[],
numbers:[1,2,3,4,5,6,7,8,9,10,11,12,13]
}
});
显示效果如图
显示出来没毛病哈，不过产品汪不答应啊，说你能不能再小于10的数字前边加上个0？面对他这么正（wu）当（li）的要求，我只能说 好！！
自己遍历？好麻烦！！！有没有其他办法？ vue提供了过滤器这个东西来帮助我们实现这种需求。
过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。
定义过滤器
//全局过滤器
Vue.filter('toDou',function(value){
if (!value) return '';
return value<10? '0'+value:value;
});
Vue的filter方法接收两个参数：第一个是过滤器名字，第二个是数据的处理函数，数据的处理函数第一个参数是我们要处理的数据
使用过滤器【把要处理是数据用 | （管道符）隔开】vue会直接把 number 放入toDou过滤器的第一个参数位
<div id='app'>
<div v-for="number in numbers">{{number | toDou}}</div>
</div>
过滤器传参数
有时候，我们可能不是仅仅是需要对文字处理这么简单，比如说我们想写一个 （打折）discount的过滤器，如果我们全场打8折，这么写就行了
Vue.filter('discount',function(value){
if (!value) return '';
return value*80/100;
});
但是需求远不止这些，产品汪说，全场有的东西打6折，有的打5折，有的...
那么，我们可以把打的折扣数作为一个参数传递给过滤器，例如这样
<div id='app'>
<div v-for="number in numbers">{{number | discount(50)}}</div>
</div>
//注意！！！！！！！！！！！！！！！！！！！！
//过滤器含参数传递时，第一个参数会放入数据处理函数的第二个参数为，如果有其他参数依次类推
上面打 5 折
Vue.filter('discount',function(value,discount){
if (!value) return ''
return value*discount/100;
});
vue1.0版本内置了capitalize、uppercase、currency、debounce、json等几种过滤器，不过到2.0这些过滤器都被删除了。我们来自定义一个白
//字符串转换为小写
Vue.filter('lowercase',function(val){
return val.toLowerCase();
})
//英文单词首字母大写
Vue.filter('capitalize',function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
有人会问，如果我一个数据同时需要用两个过滤器可以吗？
<header>
大写转小写 然后首字母大写 {{'LOWERCASE' | lowercase | capitalize }}
</header>
另外一种自定义过滤器的方法（局部过滤器）
我们也可以在我们Vue实例里构造我们的过滤器，这样构造的好处是，不会影响到其他不需要用到这个过滤器的Vue实例。
var vm=new Vue({
el:"#app",
data:{
msgs:[],
numbers:[1,2,3,4,5,6,7,8,9,10,11,12,13]
},
filters:{
capitalize:function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
});
定义在全局就能在所有的实例中调用过滤器，如果定义在了实例里就在实例里调用过滤器。
