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 方法的更多相关文章

  1. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  2. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  3. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  4. vue-cli项目中使用全局过滤器及传参(日期格式化)

    // 过滤日期格式,传入时间戳,根据参数返回不同格式 const formatTimer = function(val, hours) { if (val) { ); var y = dateTime ...

  5. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  6. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  7. [ionic开源项目教程] - 第5讲 如何在项目中使用全局配置

    第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...

  8. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

随机推荐

  1. Git常见的操作及命令

    Git的下载安装 安装直接去Git官方网站https://git-scm.com/下载后安装即可. Git常用命令 git init初始化本地仓库(没有仓库就创建) git clone克隆远程仓库到本 ...

  2. OpenGL学习笔记(六)坐标系统

    目录 一.衔接 二.概述 三.各个坐标系统 局部空间 世界空间 观察空间 裁剪空间 四.两种投影矩阵 正射投影 透视投影 五.把它们都组合到一起 六.编码实现 1. 实现卡片旋转 2. 实现正方体旋转 ...

  3. 《手把手教你》系列技巧篇(十六)-java+ selenium自动化测试-元素定位大法之By xpath下卷(详细教程)

    1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath.xpath 的定位方法, 非常强大.  使用这种方法几乎可以定位到页面上的任意元素. ...

  4. 【笔记】模型泛化与岭回归与LASSO

    模型泛化与岭回归与LASSO 模型正则化 模型正则化,简单来说就是限制参数大小 模型正则化是用什么思路来解决先前过拟合的由于过于拟合导致的曲线抖动(线性方程前的系数都很大) 线性回归的目标就是求一个最 ...

  5. 快速上手CH340N电路设计(CH340N USB转串口模块 USB Type-C接口 CH340系列芯片讲解)

    一.上模块          二.功能分析 l  芯片:CH340N l  输入接口:USB.TYPE-C l  输出接口:TTL(5V\3.3V\GND\TX\RX) l  指示灯:电源.TX.RX ...

  6. 000 PCI Express协议入门指南目录

    一.001 PCI Express体系结构(一)

  7. ubunt中,使用命令su命令切换root账户,提示认证失败

    报错截图: 解决方法: sudo passwd 重新设置root账户的密码,确认root账户的密码(再次输入密码),然后su ,输入root账户刚刚设置的密码即可切入到root账户:

  8. wpf 中的 自定义控件的 binding

    XMl 代码 --------------------------------------------------------------------------------------------- ...

  9. 踩坑记录--接口调用,传参DataTable报错

    问题描述 服务端提供接口,接口参数包含DataTable类型,客户端调用显示请求报错,Postman调用显示Could not get response 解决 原因 接口实现基于wcf,而wcf参数类 ...

  10. 常用数据库JDBC

    JDBC的URL=协议名+子协议名+数据源名.1. 协议名总是"jdbc".2.子协议名由JDBC驱动程序的编写者决定.3. 数据源名也可能包含用户与口令等信息:这些信息也可单独提 ...