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,

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

  • 相关阅读:
    活用 %取余 用于变量循环
    jquery滚动条固定在某一位置
    jquary中各种相似操作介绍
    jquary中滚动条滚动到底部
    JSON到字符串之间的解析
    ecshop删去版权等信息
    分享代码和网页地图
    ecshop版权的修改,头部,底部
    ECSHOP中transport.js和jquery的冲突的简单解决办法
    从Eclipse迁移到Android Studio碰到的问题记录
  • 原文地址:https://www.cnblogs.com/lmm1010/p/13075268.html
Copyright © 2011-2022 走看看