vue获取时间戳转换为日期格式代码实例


Posted in Javascript onApril 17, 2019

vue获取时间戳转换为日期格式。

方法一为转载黄轶老师的format方法:出处(黄轶老师github    https://github.com/ustbhuangyi);

// date.js
export function formatDate (date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
};
 
function padLeftZero (str) {
  return ('00' + str).substr(str.length);
};
<!-- **.vue -->
<template>
  <!-- time时间戳 -->
  <div>{{time | formatDate}}</div>
  <!-- 输出结果 -->
  <!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/date.js';
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm');
    }
  }
}
</script>

方法二为自写(在百度出的结果十个有九个是上述方法且在不想使用上述方法的情况下):

使用vue.filter

<!-- demo.vue -->
<template>
 <!-- time为时间戳 -->
 <div>{{time | formatDate}}</div>
 <!-- 结果为 2018-01-23 18:31:35 -->
</template>
<script type="text/ecmascript-6">
 export default {
  data() {
   return {
    time: 1516703495241
   };
  },
  filters: {
   formatDate: function (value) {
    let date = new Date(value);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? ('0' + MM) : MM;
    let d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    let h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    let m = date.getMinutes();
    m = m < 10 ? ('0' + m) : m;
    let s = date.getSeconds();
    s = s < 10 ? ('0' + s) : s;
    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
   }
  }
 };
</script>
<style lang="stylus" rel="stylesheet/stylus">
 
</style>

以上所述是小编给大家介绍的vue获取时间戳转换为日期格式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在javascript中关于节点内容加强
Apr 11 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 #Javascript
vue 项目 iOS WKWebView 加载
Apr 17 #Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 #Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 #Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 #Javascript
基于JS实现web端录音与播放功能
Apr 17 #Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 #Javascript
You might like
一个odbc连mssql分页的类
2006/10/09 PHP
多php服务器实现多session并发运行
2006/10/09 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
php创建类并调用的实例方法
2019/09/25 PHP
jquery中动态效果小结
2010/12/16 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python多线程分块读取文件
2019/08/29 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
党员批评与自我批评发言稿
2014/10/14 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
优秀大学生申请书
2019/06/24 职场文书
python OpenCV学习笔记
2021/03/31 Python
深入理解Vue的数据响应式
2021/05/15 Vue.js