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,

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

  • 相关阅读:
    Linux 中 /proc/meminfo 的含义
    Linux OOM-killer(内存不足时kill高内存进程的策略)
    java反射
    IDEA 创建Web项目
    centos7 源码安装php7
    linux 基本原则和常用命令
    ls file less
    centos7安装nginx1.10.1
    mysqlworkbench访问远程服务器
    redis 简单的注册
  • 原文地址:https://www.cnblogs.com/lmm1010/p/13075268.html
Copyright © 2011-2022 走看看