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. 源码解析.Net中IConfiguration配置的实现

    前言 关于IConfituration的使用,我觉得大部分人都已经比较熟悉了,如果不熟悉的可以看这里.因为本篇不准备讲IConfiguration都是怎么使用的,但是在源码部分的解读,网上资源相对少一 ...

  2. Java基础技术JVM面试【笔记】

    Java基础技术JVM面试[笔记] JVM JVM 对 java 类的使用总体上可以分为两部分:一是把静态的 class 文件加载到 JVM 内存,二是在 JVM 内存中进行 Java 类的生命周期管 ...

  3. 渲染优化之CSS Containment

    引言 在开始介绍今天的主角 CSS Containment 之前,我们需要了解一些前置知识回流和重绘,方便我们理解以及应用的场景. 简单回忆下回流和重绘 回流(Reflow):当浏览器必须重新处理和绘 ...

  4. 第8篇-dispatch_next()函数分派字节码

    在generate_normal_entry()函数中会调用generate_fixed_frame()函数为Java方法的执行生成对应的栈帧,接下来还会调用dispatch_next()函数执行Ja ...

  5. 11-SpringCloud Hystrix

    Hystrix简介 分布式系统面临的问题 复杂分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败. 服务雪崩 多个微服务之间调用的时候,假设微服务A调用微服务B和微服务 ...

  6. Docker运行中文版GitLab

    docker-compose.yml version: '3' services: web: image: 'twang2218/gitlab-ce-zh:10.5' restart: always ...

  7. Windows10 Dev - Background Execution

    The Universal Windows Platform (UWP) introduces new mechanisms, which allow the applications to perf ...

  8. springboot使用redis(从配置到实战)

    概述 springboot通常整合redis,采用的是RedisTemplate的形式,除了这种形式以外,还有另外一种形式去整合,即采用spring支持的注解进行访问缓存. 准备工作 pom.xml ...

  9. MongoDB学习笔记二- Mongoose

    MongoDB学习笔记二 Mongoose Mongoose 简介 之前我们都是通过shell来完成对数据库的各种操作, 在开发中大部分时候我们都需要通过程序来完成对数据库的操作 而Mongoose就 ...

  10. RabbitMQ从零到集群高可用(.NetCore5.0) - 死信队列,延时队列

    系列文章: RabbitMQ从零到集群高可用(.NetCore5.0) - RabbitMQ简介和六种工作模式详解 RabbitMQ从零到集群高可用(.NetCore5.0) - 死信队列,延时队列 ...