Vue过滤器简介

时间：2020-06-09 18:17:13 阅读：48 评论：0 收藏：0 [点我收藏+]

过滤器的主要作用就是对数据进行处理，返回处理过的数据

过滤器分为全局过滤器和局部过滤器

全局过滤器

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，

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

Vue过滤器简介

标签：组件 ons space 简介 new 图片结果符号参数

原文地址：https://www.cnblogs.com/lmm1010/p/13075268.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行