Vue过滤器简介

Posted lmm1010

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,

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

 

 

 

技术图片

 

以上是关于Vue过滤器简介的主要内容,如果未能解决你的问题,请参考以下文章

vue.js基础知识篇:简介数据绑定指令计算属性表单控件绑定和过滤器

Vue2 全局过滤器(vue-cli)

VUE过滤器

VUE过滤器

再读vue2.0

vue框架:框架简介,基础实例成员,基础指令,js对象方法补充