Vue学习之路第十八篇：私有过滤器的使用
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学习之路第十八篇：私有过滤器的使用的更多相关文章
- Vue学习之路第十六篇：车型列表的添加、删除与检索项目
又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...
- Vue学习之路第十二篇：为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- Vue学习之路第十九篇：按键修饰符的使用
1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...
- Vue学习之路第十五篇：v-if和v-show指令
1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...
- Vue学习之路第十四篇：v-for指令中key的使用注意事项
1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...
- FastAPI 学习之路（十八）表单与文件
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))
各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...
随机推荐
- DLR概念
参考文章 动态语言运行时(Dynamic Language Runtime,DLR)是一套基于.NET的类库,它的作用是简化在CLR上开发动态语言的工作,例如DLR中提供了表达式树的创建,代码生成.优 ...
- [bzoj2748][HAOI2012]音量调节_动态规划_背包dp
音量调节 bzoj-2748 HAOI-2012 题目大意:有一个初值,给你n个$\delta$值,求最后不超过给定的限制的情况下的改变的最大值.每个$\delta$值可以+也可以-. 注释:$1\l ...
- POJ 2374
挺水的一道线段树+DP题.可以从底往上添加线段,每添加线段之前查询端点所被覆盖的区间线段.再从最顶往下DP,每次从端点出发,递推覆盖该端点的区间线段的两端的值即可. #include <cstd ...
- andoid电阻触摸移植
这里我使用的是210的开发板 系统Android4.0.4 内核linux3.0.8 要用电阻屏一般都是使用tslib进行校准的 这里给个我在android上用的tslib 下载地址 http://d ...
- Github 协同开发
ithub开发流程 Github的流程.也就是: 开发者各自fork项目的repo到自己Github账户下 每次开发同步到项目的repo然后再进行开发 push自己的开发分支到自己Github账户下面 ...
- oc23--变量修饰符
// // Person.h #import <Foundation/Foundation.h> /* @public:所有类访问 @private:本类访问 @protected:本类子 ...
- Unsupported major.minor version 52.0 (unable to load class XXX
java项目构建从高版本JDK改为低版本JDK报错.这是再次编译时使用的JDK版本比你原来编译的版本低所导致的. 转自:http://blog.csdn.net/zixiao217 maven项目在服 ...
- [转载]RouteOS安装设置
原文地址:RouteOS安装设置作者:抟鹏追梦 RouteOS2.7.4可以将一台普通的PC机变成一台专业的路由器,高到ISP的核心路器/认证网关-因为它功能强大稳定,低到家庭网关防火墙-因为它免费. ...
- 关于阿里云oss
这两天抽时间看了一下阿里云oss,阿里云oss是阿里为大数据推出的开放存储服务,为多种语言预留出了接口,下面是我对php接口的一点理解. 当注册了阿里云oss账号时会得到接口,在config里面填上这 ...
- hihoCoder-1633 ACM-ICPC北京赛区2017 G.Liaoning Ship’s Voyage 线段与三角形规范相交
题面 题意:给你一个20*20的地图,起点(0,0),终点(n-1,n-1),有障碍的点为‘#’,每次可以向8个方向走一步,还给了一个三角形,除了障碍以外,到这8个方向上的点的线段如果没有与三角形相交 ...