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. 我一个五年Android开发,居然被一个技术不如我的面试官嫌弃了......

    背景 首先介绍一下自己的情况.目前所在的是一家小的创业公司,待了5年多,薪资一般吧.由于这几年公司也在转型.工作经历大概可以分为 3 个阶段. 第一阶段是从进公司开始做 android app 开发, ...

  2. Rip CD on Ubuntu

    用Mint自带的banshee可以把CD转换为ogg文件,[Media -> Import Media],然后选择Audio CD,但只能转换为ogg格式,好像不能自动获取ID3标签:比较好的方 ...

  3. 不懂Ribbon原理的可以进来看看哦,分析SpringBoot自动装配完成了Ribbon哪些核心操作

      前面详细的给大家介绍了SpringBoot的核心内容,有了这部分的基础支持的话,我们再来分析SpringCloud中的相关组件就很容器了,本文我们来给大家开始介绍Ribbon的相关内容,首先来介绍 ...

  4. MySQL-14-备份恢复

    备份类型 1 热备 在业务正常时,对数据库进行备份数据,并且能够一致性恢复(只能是innodb) 对业务影响非常小 2 温备 锁表备份,只能查询不能修改(myisam) 影响到写入操作 3 冷备 关闭 ...

  5. Java通过SSLEngine与NIO实现HTTPS访问

    Java使用NIO进行HTTPS协议访问的时候,离不开SSLContext和SSLEngine两个类.我们只需要在Connect操作.Connected操作.Read和Write操作中加入SSL相关的 ...

  6. SQL注入的那些面试题总结

    一.知识储备类 1.SQL与NoSQL的区别? SQL:关系型数据库 NoSQL:非关系型数据库 存储方式:SQL具有特定的结构表,NoSQL存储方式灵活 性能:NoSQL较优于SQL 数据类型:SQ ...

  7. Ajax 局部刷新 异步提交

    AJAX简介 局部刷新,异步提交. AJAX 不是新的编程语言,而是一种使用现有标准的新方法.它最大的有点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 浏览器朝后端发送请 ...

  8. NOIP 模拟 $26\; \rm 神炎皇$

    题解 \(by\;zj\varphi\) 一道 \(\varphi()\) 的题. 对于一个合法的数对,设它为 \((a*m,b*m)\) 则 \(((a+b)*m)|a*b*m^2\),所以 \(( ...

  9. msp432搭建平衡小车(二)

    前言 上一节掌握了使用pwm驱动电机,接下来介绍如何使用msp432读取mpu6050数据 正文 首先我们得知道mpu6050通信方式,由于mpu6050只能用i2c通信,所以学会使用msp432的i ...

  10. flutter查看安全码SHA1

    最近flutter技术调研高德地图插件时,要用到安全码,可以打开cmd,键入一下命令查看.(注意路径用户名yourusernamehere改为自己的) keytool -list -v -keysto ...