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,

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

  • 相关阅读:
    QTreeWidgetItem清空子节点
    qt no doubments matching "ui..h" could be found
    Qt 调试信息、打印信息、输出到文本
    QLayout及其子类 清除添加的widget
    同一个电脑安装两个jdk版本
    hive javaapi 002
    ActiveMQ之spring集成消息转换器MessageConverter
    install Maven
    install apache-activemq
    MySQL 5.7.9版本sql_mode=only_full_group_by问题
  • 原文地址:https://www.cnblogs.com/lmm1010/p/13075268.html
Copyright © 2011-2022 走看看