• 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,

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

  • 相关阅读:
    Dijksrta algorithm
    头一回发博客,来分享个有关C++类型萃取的编写技巧
    读书笔记「Python编程:从入门到实践」_4.操作列表
    读书笔记「Python编程:从入门到实践」_3.列表简介
    读书笔记「Python编程:从入门到实践」_2.变量和简单数据类型
    2017/01/20 学习笔记 关于修改和重打jar包
    2017/01/07 学习笔记 jar包,maven
    常用链接
    使用Dir,遍历文件夹下所有子文件夹及文件
    .NET WEB项目的调试发布相关
  • 原文地址:https://www.cnblogs.com/lmm1010/p/13075268.html
Copyright © 2020-2023  润新知