zoukankan      html  css  js  c++  java
  • 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,

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

  • 相关阅读:
    rabbitmq在centos7下安装
    跨域问题
    11生成器相关及推导式(附内置函数分析图url)
    10函数名的应用,闭包,和迭代器
    09函数的动态传参及global和nonlocal关键字
    08函数简介
    07基本的文件操作
    06set集合和深浅拷贝(包括前面的一些知识点补充)
    05判断和编码/解码
    04基本数据类型(字典)
  • 原文地址:https://www.cnblogs.com/lmm1010/p/13075268.html
Copyright © 2011-2022 走看看