在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项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
随机推荐
- 还怕问源码?Github上神级Android三方源码解析手册,已有7.6 KStar
或许对于许多Android开发者来说,所谓的Android工程师的工作"不过就是用XML实现设计师的美术图,用JSON解析服务器的数据,再把数据显示到界面上"就好了,源码什么的,看 ...
- 【Lua篇】静态代码扫描分析(一)初步介绍
一.静态代码分析 静态代码分析是一种通过检查代码而不是执行程序来发现源代码中错误的手段.通常可以帮助我们发现常见的编码错误,例如: 语法错误 违反制定的标准编码 未定义的变量 安全性问 ...
- SQL--查询JSON、时间、字符串的高级用法
SQL--查询JSON.时间.字符串的高级用法 本文章总结SQL的JSON.时间格式.字符串判断转换的使用.核心点还是在于Json字段的提取(1.5).时间的比较(2.2,2.3)以及字符串的查询(3 ...
- Qt项目简易开发原理及常见问题解决
一.资源下载地址 https://www.aliyundrive.com/s/jBU2wBS8poH 本项目路径:项目->免费->QtDev 注释:为了方便qt全功能开发,QtDev中包含 ...
- 使用 C# 下载文件的十八般武艺
文件下载是一个软件开发中的常见需求.本文从最简单的下载方式开始步步递进,讲述了文件下载过程中的常见问题并给出了解决方案.并展示了如何使用多线程提升 HTTP 的下载速度以及调用 aria2 实现非 H ...
- 使用Squid部署代理缓存服务(标准正向、透明正反向代理)
正向代理让用户可以通过Squid服务程序获取网站页面等数据,具体工作形式又分为标准代理模式与透明代理模式.标准正向代理模式: 将网站的数据缓存在服务器本地,提高数据资源被再次访问时的效率,但用户必需在 ...
- 用Vsftpd服务传输文件
文件传输协议 文件传输协议(FTP,File Transfer Protocol),即能够让用户在互联网中上传.下载文件的文件协议,而FTP服务器就是支持FTP传输协议的主机,要想完成文件传输则需要F ...
- 尝试通过 JDBC 将 UTF-8 插入 MySQL 时出现“乱码”
这是我的连接设置方式: Connection conn = DriverManager.getConnection(url + dbName + "?useUnicode=true& ...
- 3 分钟了解 JSON Schema
大家好,我不是鱼皮. 幸运又不幸,我是一名程序员,他也是一名程序员. 周末,我在开发网站,他在开发游戏,两个人一起写代码,一起写 Bug 头秃,竟也有了一丝别样的浪漫,好不自在! 今天,他遇到了一个后 ...
- 判断N是否是质数,为什么判断到根号N就可以了
N=根号N*根号NN的因数除了根号N,其他都是成对存在的, 且必定一个大于根号N一个小于根号N假设N不是质数,有个因数大于根号N(不是N本身) 则N必定有一个与之对应的小于根号N的因数也就是说,如果2 ...