在vue-cli项目中定义全局 filter、method 方法
1、创建 filters.js(methods.js) 文件:

2、filters.js(methos.js) 中定义全局过滤方法:
1 export default {
2 /** 时间戳转换 */
3 showTime (time) {
4 let date = null
5 if ((time + '').length === 10) {
6 date = new Date(time * 1000)
7 } else {
8 date = new Date(time)
9 }
10 const Y = date.getFullYear()
11 const M = date.getMonth() + 1
12 const D = date.getDate()
13 const H = date.getHours()
14 const MM = date.getMinutes()
15 const S = date.getSeconds()
16 return `${Y}-${(M > 9 ? M : ('0' + M))}-${(D > 9 ? D : ('0' + D))} ${(H > 9 ? H : ('0' + H))}:${(MM > 9 ? MM : ('0' + MM))}:${(S > 9 ? S : ('0' + S))}`
17 },
18 /** 根据身份证号获取出生日期 */
19 getBirthday (idCard) {
20 let birthday = ''
21 if (idCard) {
22 if (idCard.length === 15) {
23 birthday = `19${idCard.substr(6, 6)}`
24 } else if (idCard.length === 18) {
25 birthday = idCard.substr(6, 8)
26 }
27
28 birthday = birthday.replace(/(.{4})(.{2})/, '$1-$2-')
29 }
30 return birthday
31 }
32 }
3、main.js入口文件引用
1 import filters from './filters'
2 import filters from './methods'
3 Object.keys(filters).forEach(k => {
4 Vue.filter(k, filters[k])
5 })
6 Object.keys(methods).forEach(k => {
7 Vue.prototype[k] = methods[k]
8 })
4、组建中使用
1 <template>
2 // 过滤
3 <div>{{ 1454664434 | showTime }}</div>
4 </template>
5、显示

在vue-cli项目中定义全局 filter、method 方法的更多相关文章
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- vue-cli项目中使用全局过滤器及传参(日期格式化)
// 过滤日期格式,传入时间戳,根据参数返回不同格式 const formatTimer = function(val, hours) { if (val) { ); var y = dateTime ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- [ionic开源项目教程] - 第5讲 如何在项目中使用全局配置
第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
随机推荐
- 用于在公网环境下测试的Telnet/SSH服务器
google: public telnet server list for example: telnet nethack.alt.org ssh nethack@alt.org
- Dubbo系列讲解之扩展点实现原理分析【2万字分享】
Apache Dubbo 是一款微服务开发框架,它提供了 RPC通信 与 微服务治理 两大关键能力.这意味着,使用 Dubbo 开发的微服务,将具备相互之间的远程发现与通信能力, 同时利用 Dubbo ...
- 做iOS自动化测试必须知道的一些知识
WDA facebook wda 2015年Facebook 开源了一款 iOS 移动测试框架WebDriverAgent,WebDriverAgent 在 iOS 端实现了一个 WebDriver ...
- 使用Java8改造出来的模板方法真的是yyds
GitHub 21.3k Star 的Java工程师成神之路,不来了解一下吗! GitHub 21.3k Star 的Java工程师成神之路,真的不来了解一下吗! 我们在日常开发中,经常会遇到类似的场 ...
- [ES6深度解析]12:Classes
我们将讨论一个老问题:在JavaScript中创建对象的构造函数. 存在的问题 假设我们想要创建最典型的面向对象设计的示例:Circle类.假设我们正在为一个简单的Canvas库编写一个Circle. ...
- .Net Core 踩坑记录--无法逐步调试类库文件
前提 新建类库 在新项目中引用该类库 将类库对应的.PDB文件 拷贝至新项目的bin文件夹下 结果 无法进行跟踪调试 狗带 分析与解决 1: 打开 工具-->选项-->调试 2: 常规-- ...
- 演练:创建和使用自己的动态链接库 (C++)
此分布演练演示如何使用 Visual Studio IDE 通过 Microsoft C++ (MSVC) 编写自己的动态链接库 (DLL). 然后,该演练演示如何从其他 C++ 应用中使用 DLL. ...
- HttpClient4.3教程 第四章 HTTP认证
HttpClient既支持HTTP标准规范定义的认证模式,又支持一些广泛使用的非标准认证模式,比如NTLM和SPNEGO. 4.1.用户凭证 任何用户认证的过程,都需要一系列的凭证来确定用户的身份.最 ...
- HttpClient 4.3教程-前言
前言 Http协议应该是互联网中最重要的协议.持续增长的web服务.可联网的家用电器等都在继承并拓展着Http协议,向着浏览器之外的方向发展. 虽然jdk中的java.net包中提供了一些基本的方法, ...
- C#设计模式---模板方法模式(Template Method Pattern)
一.目的 模板方法模式把不变行为搬到超类中,从而去除了子类中的重复代码. 二.定义 模板方法模式:在一个抽象类中定义一个操作的算法骨架,将算法骨架中某些特定的操作延迟到子类中实现. 模板方法使得子类在 ...