Vue过滤器简介

过滤器的主要作用就是对数据进行处理，返回处理过的数据

过滤器分为全局过滤器和局部过滤器

全局过滤器

Vue.filter（），里面有两个参数，参数1是过滤器名，参数2是处理数据的回调函数，注意回调函数里一定要return

这是创建过滤器，使用过滤器一般格式为{{要过滤的数据 | 过滤器的名}}（注释：“|”为管道符号）

我们来看一个例子：

    <div id="app">

        {{time|xixi}}

        <!-- {{要过滤的数据|（管道符号）过滤器的名字}} -->

    </div>

    <script>

        // 过滤器的创建

        Vue.filter("xixi",(test)=>{

            console.log(test)

            return test/2

        })

        let vm=new Vue({

            el:"#app",

            data:{

               time:'100'

            }

        })

    </script>

结果为50，

我们先创建一条数据time，在创建一个过滤器xixi，使用时直接按照格式{{time|xixi}}就可以获取到这条数据经过过滤器处理只有的数据了。

局部过滤器

局部过滤器的使用和全局过滤一样，都是{{要过滤的数据 | 过滤器的名}}，但在创建的时候是做为组件或者实例里的配置项filters：{过滤器名，处理函数}去实现的。

    <div id="app">

        {{time|xixi}}

        <!-- {{要过滤的数据|（管道符号）过滤器的名字}} -->

    </div>

    <script>

        let vm=new Vue({

            el:"#app",

            data:{

               time:'100'

            },

            filters: {

                "xixi":(data)=>{

                    return data/2

                }

            }

        })

    </script>

结果也为50，

我们可以看到局部和全局唯一不同的地方就是在于创建，局部过滤器是作为组件的配置项去创建的。