vue时间格式化实例代码


Posted in Javascript onJune 13, 2017

整理文档,搜刮出一个vue时间格式化实例代码,稍微整理精简一下做下分享。

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);
}

把上面代码保存为date.js放到你的公共js文件夹中。

在你的需要格式化时间戳的组件里像下面这样使用:

<template>
  <!-- 过滤器 -->
  <div>{{time | formatDate}}</div>
  <!-- 输出结果 -->
  <!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/date.js';
export default {
  data() {
    return {
      time:1469281964000
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, yyyy-MM-dd hh:mm);
    }
  }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
详解vue slot插槽的使用方法
Jun 13 #Javascript
详解Vue.js分发之作用域槽
Jun 13 #Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 #Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 #Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 #Javascript
微信小程序动态显示项目倒计时效果
Jun 13 #Javascript
深究AngularJS之ui-router详解
Jun 13 #Javascript
You might like
又一个php 分页类实现代码
2009/12/03 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
大学老师推荐信
2014/02/25 职场文书
师德标兵事迹材料
2014/12/19 职场文书
《山中访友》教学反思
2016/02/24 职场文书