vue 时间戳 格式转化（插件化） - 封装篇
时间戳 格式转化 - 封装插件：vue的 fliter 过滤器
使用
vue.js的fliter过滤器
通过这个插件化方法，说明一下全局方法及组件的设置和使用问题。
- 全局组件 · 注册方法：含 .vue和.js文件
- 全局js函数 · 注册方法：含 .js文件
- 全局注册 · fliter过滤器 · 及 npm install moment.js (第三方组件)
效果图：
代码具体设置 · 实施：
官方相关文档：过滤器 【推荐先阅读】
一、 main.js具体代码如下： (全局注册：过滤器)
// 时间戳格式化：全局过滤器Vue.filter('dateDiff', function (timestamp) {// 补全为13位var arrTimestamp = (timestamp + '').split('');for (var start = 0; start < 13; start++) {if (!arrTimestamp[start]) {arrTimestamp[start] = '0';}}timestamp = arrTimestamp.join('') * 1;var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;var halfamonth = day * 15;var month = day * 30;var now = new Date().getTime();var diffValue = now - timestamp;// 如果本地时间反而小于变量时间if (diffValue < 0) {return '不久前';}// 计算差异时间的量级var monthC = diffValue / month;var weekC = diffValue / (7 * day);var dayC = diffValue / day;var hourC = diffValue / hour;var minC = diffValue / minute;// 数值补0方法var zero = function (value) {if (value < 10) {return '0' + value;}return value;};// 使用if (monthC > 12) {// 超过1年，直接显示年月日return (function () {var date = new Date(timestamp);return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';})();} else if (monthC >= 1) {return parseInt(monthC) + "月前";} else if (weekC >= 1) {return parseInt(weekC) + "周前";} else if (dayC >= 1) {return parseInt(dayC) + "天前";} else if (hourC >= 1) {return parseInt(hourC) + "小时前";} else if (minC >= 1) {return parseInt(minC) + "分钟前";}return '刚刚';
})二、 在目标.vue文件内调用方式：（部分代码 截图如下）
// search.vue
// 注意代码调用 ： {{ resume.updateDate | dateDiff }}<el-col :span="8"><div class="box2"><p class="clr-1a">{{resume.jobIntention}} {{resume.salaryExp}}K {{resume.jobWantedState}} </p><p class="clr-666">{{resume.seniority}}年 {{resume.location}} </p><p class="clr-b2">{{resume.education}} {{resume.birthday}}岁 <!--{{(new Date(resume.updateDate)).getMonth()+1}}月{{(new Date(resume.updateDate)).getDate()}}日 {{(new Date(resume.updateDate)).getHours()}}时 -->{{ resume.updateDate | dateDiff }}</p></div>
</el-col>
阅读访问：
- 时间戳：在线工具
- 时间戳显示为多少分钟前，多少天前的JS处理
以上就是关于“ vue 时间戳 格式转化（插件化） - 封装篇 ” 的全部内容。
vue 时间戳 格式转化（插件化） - 封装篇相关推荐
- vue实现数字“滚动式增加”效果 【插件化封装】
vue实现数字"滚动式增加"效果 [页面加载后,获取API返回的data后,即执行渲染动画(如下图gif动画)] 源码来自于转载 demo演示地址 https://www.17su ...
- 【MySql】mysql存储毫秒级日期以及PHP时间戳格式转化
没有废话 datetime 类型展示为 2019-02-27 18:19:37 ,精确到秒 datetime(3) 类型展示为 2019-02-27 18:18:33.565 ,精确到毫秒 navic ...
- 【MySql】存储毫秒级日期以及PHP时间戳格式转化
datetime 类型展示为 2019-02-27 18:19:37 ,精确到秒 datetime(3) 类型展示为 2019-02-27 18:18:33.565 ,精确到毫秒 navicat中的操 ...
- 好用的时间戳转化插件
项目中我们经常会遇见要把时间戳转换成时间的情况,或者是把当前的时间转换成时间戳传给后台. 下面 向大家介绍几款好用的时间戳转化插件 1. Day.js :一个轻量的处理时间和日期的 JavaScrip ...
- vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇 具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
- JavaScript条形码生成插件 - 封装篇
很多事时候会用到手机扫描条形码收录或者查验信息的功能,那么,条形码是如何实现的呢? 今天,通过封装的js插件,完成这个问题. JavaScript条形码生成插件 - 封装篇 j q 2 2 .c o ...
- RequireJS模块的建立：插件化体验 - demo演示篇
RequireJS模块的建立:插件化体验 - demo演示篇 新建一个RequireJS模块:作为jQuery验证插件进行使用. 一. 前文的目录结构 结合前文的目录结构和相关文件,在lib文件夹下, ...
- 《Android插件化技术——原理篇》
| 导语 插件化技术最早从2012年诞生至今,已经走过了5个年头.从最初只支持Activity的动态加载发展到可以完全模拟app运行时的沙箱系统,各种开源项目层出不穷,在此挑选了几个代表性的框架,总结 ...
- element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇
el-cascader组件 :(返回结果的)格式转化 有时候会报错:TypeError: thsAreaCode.replace is not a function (bug截图如下) 说白了就是该组 ...
最新文章
- opencv c++ 寻找矩形框_基于Python的OpenCV人脸检测！OpenCV太强了！
- 收藏一波：常用正则表达式公式总结
- 将 Silverlight 与网页集成【转载】
- 开源，免费和跨平台 － MVP ComCamp 2015 KEYNOTE
- C++多线程快速入门（三）：生产者消费者模型与条件变量使用
- C/C++中“空语句”的说明
- IE6下PNG图片透明效果(PNG图片做背景也可以)
- 关于举办“全国大学生大数据技能竞赛”的通知
- 判断字符串解析是JsonObject或者JsonArray
- 把java程序打包成.exe
- java redis keys_jedis keys和scan操作
- Java爬虫工程师技能列表
- JMeter java.lang.OutOfMemoryError: PermGen space错误
- c语言和测绘程序设计,测绘程序设计(C语言版)
- php学籍信息管理系统心得_php学籍管理系统，源码免费分享
- 【小睿精选·第四期】谷歌开源更快、更高效的 TensorFlow 运行时 TFRT
- android 手机系统排行榜,手机系统排行榜出炉：第一名意料之中，MIUI排名令人意外！...
- 029_《编程高手箴言》
- 将目录专为源码html,LiteOS移植笔记
- Linux ns 3. Mnt Namespace 详解