1、上篇已经介绍了全局过滤器的使用，“全局”顾名思义就是一次定义处处使用，可以被一个页面里不同的Vue对象所使用，如下代码所示：

<body>

    <div id="app1">

        app1的时间格式化：{{dataStr | formatData}}

    </div>

    <div id="app2">

        app2的时间格式化：{{dataStr | formatData}}

    </div>

    <script type="text/javascript">

        Vue.filter('formatData',function(dataStr){

            var newDate = new Date();

            var y = newDate.getFullYear();

            var m = newDate.getMonth() + 1;

            var d = newDate.getDate();

            var hh = newDate.getHours();

            var mm = newDate.getMinutes();

            var ss = newDate.getSeconds();

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

        });

        var vm1 = new Vue({

            el : "#app1",

            data : {

                dataStr : new Date()

            },

            methods : {}

        });

        var vm2 = new Vue({

            el : "#app2",

            data : {

                dataStr : new Date()

            },

            methods : {}

        });

    </script>

</body>

这里定义了两个Vue对象分别绑定id为div1和div2的元素，在这两个元素作用域里使用了全局过滤器formatData，运行的效果是一样的，这就是全局过滤器。但是有的时候我们想定义一个专属于某个Vue对象的过滤器，不允许别的对象访问，这个时候我们就需要定义私有过滤器。

2、私有过滤器

<body>

    <div id="app1">

        app1的时间格式化：{{dataStr | formatData}}

    </div>

    <div id="app2">

        app2的时间格式化：{{dataStr | formatData}}

    </div>

    <script type="text/javascript">

        var vm1 = new Vue({

            el : "#app1",

            data : {

                dataStr : new Date()

            },

            methods : {},

            filters:{

                formatData:function(dataStr){

                    var newDate = new Date();

                    var y = newDate.getFullYear();

                    var m = newDate.getMonth() + 1;

                    var d = newDate.getDate();

                    var hh = newDate.getHours();

                    var mm = newDate.getMinutes();

                    var ss = newDate.getSeconds();

                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

                }

            }

        });

        var vm2 = new Vue({

            el : "#app2",

            data : {

                dataStr : new Date()

            },

            methods : {}

        });

    </script>

</body>

私有过滤器的定义需要放在Vue对象里，属性名为：filters，其值为对象，对象内容为方法，其中方法名为私有过滤器的名称，方法参数是需要处理的数据，返回值为处理之后的展示值，也可以同时定义多个私有过滤器。

运行结果如下：

id为app1的时间被格式化成功，app2的没有被格式化，说明私有化的过滤器不允许被其他Vue对象调用。

每天进步一点点！

Vue学习之路第十八篇：私有过滤器的使用的更多相关文章

  1. Vue学习之路第十六篇：车型列表的添加、删除与检索项目

    又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...

  2. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  3. Vue学习之路第十九篇：按键修饰符的使用

    1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...

  4. Vue学习之路第十五篇：v-if和v-show指令

    1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...

  5. Vue学习之路第十四篇：v-for指令中key的使用注意事项

    1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...

  6. FastAPI 学习之路（十八）表单与文件

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  7. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  8. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  9. vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

    各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...

随机推荐

  1. asp.net--OnAuthorization方法

    我看别人可以通过这个方法中的 Context.Request.Headers.Authorization对象来调取对象来使用,可是我通过实验尝试不出来,真不知道为什么,这儿留个坑吧 别人的 我的

  2. Go语言net/http 解读.

    Http包提供实现HTTP客户端和服务端的方法与函数. Get.Head.Post.PostForm配合使用实现HTTP请求: resp, err := http.Get("http://e ...

  3. gcc指定头文件路径及动态链接库路径

    gcc指定头文件路径及动态链接库路径   本文详细介绍了linux 下gcc头文件指定方法,以及搜索路径顺序的问题.另外,还总结了,gcc动态链接的方法以及路径指定,同样也讨论了搜索路径的顺序问题.本 ...

  4. CentOS 7 安装Nginx做反向代理

    题记 须要使用nginx的反向代理功能,測试环境为centos+NGINX 1.8.0. 跳过一些繁琐的问题,直接记录核心 步骤 (1)centos 安装在VM中.因此须要注意网络连接问题 (2)安装 ...

  5. 【数据结构与算法】(二) c 语言链表的简单操作

    // // main.c // testLink // // Created by lan on 16/3/6. // Copyright © 2016年 lan. All rights reserv ...

  6. Linux - Nginx的集群与负载均衡

    Nginx的集群与负载均衡 集群就是一群人干同样的活,负载均衡就是保证每个人都干得差不多.或者大人干得多一些,小孩干得少一些. Nginx实现负载均衡很方便. 准备三台服务器,一台是用于访问图片(66 ...

  7. 11.修改WSDL文档

    http://localhost:8077/person?wsdl可以由你来控制的.拿Person这个例子来说.

  8. 使用python进行re拆分网页内容

    这里简短的总结一下而不是完全的罗列python的re模块,python的re具有强大的功能,如下是一个从我们学校抓取数据然后拆分的程序,代码如下: import httplib import urll ...

  9. javascript中的分号【；】

    以前一直以为,在编写js代码的时候,如果在代码后面不添加分号,JavaScript会自动填补分号.最近看了权威指南,才突然发现一直理解有误,而且关于分号的使用,还有很多需要注意的地方. 1.分号的省略 ...

  10. [Algorithm]扔杯问题

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...