vue2.0过滤器

最近一阶段，项目上比较清闲，有了更多的时间可以研究一下vue了。

这里记录一下关于vue2.0过滤器的学习。

vue2.0删除了所有的框架自带的过滤器，也就是说，如果你在vue2.0当中想用过滤器，那么只能自定义。

自定义过滤器分为全局过滤器和组件内部过滤器。

其实本质上没什么区别，只是定义的方式略有细微差别。

使用方式：

　　vue2.0官方文档中，明确说明：过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

<!-- 在双花括号中 -->
{{ arr | sum }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

　

定义方式：

1、在组件当中定义过滤器

　　　与methods，data等数据同级filters内部定义你需要使用的过滤器就可以。表现形式为函数。

　　这里以对数组arr求和为例。　

filters:{
    sum(val){
        return val.reduce((dep, item)=>{
            return dep + item;
        }, 0)
    }
},　

过滤器sum的第一个形参默认为需要过滤的内容，在页面当中使用的时候，就相当于“|”之前的数据，这里就相当于数据arr，至于数组方法reduce，可以参考Array.prototype.reduce()。

　　事实上，过滤器还可以传入多个参数，例如对当前数组求和之后，再加上一个10。

　　那么在调用时，也需要同步修改（为了方便控制，可以在data数据内定义一个add：10）：

{{ arr | sum(add) }}

　　如果不想在data中定义，也可以直接传入

{{ arr | sum(10) }}

　　过滤器修改只需要多加一个形参就可以

filters:{
    sum(value, add){
        return value.reduce((dep, item) => {
            return dep + item;
        }, add);
    }
},

既然可以多传一个参数，那么必然也可以传入更多的参数。

　　不过一般情况下，也不建议传入太多参数，毕竟没必要通过过滤器来实现比较复杂的逻辑。

至于全局定义组件，也就是把刚刚定义的局部组件过滤器搬到main.js(使用脚手架vue-cli生成的vue项目中)中

Vue.filter('sum', function(value, add) {
    let num = value.reduce((dep, item) => {
        return dep + item;
    }, 0)
    return num + add;
})

　　除了定义方式略有区别之外，没有其他任何区别。