来自:https://blog.csdn.net/m0_37068028/article/details/72898154 侵删

来自:https://segmentfault.com/a/1190000010378259 侵删

第一种:

// template
{{date | formatDate}} //script
import {formatDate} from '../../common/js/date'
filters: {
  formatDate (time) {
     let date = new Date(time) return formatDate(date, 'yyyy-MM-dd hh:mm')
  }
}

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


第二种:

npm install moment --save 
main.js 中 
import moment from 'moment/moment' 添加过滤器:
Vue.filter('moment', function (value, formatString) {
formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
// return moment(value).format(formatString); // value可以是普通日期 20170723
return moment.unix(value).format(formatString); // 这是时间戳转时间
}); /* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
页面中使用
<template>
<div id="app">
<div>
{{ datetime | moment }}
</div>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
datetime: '1500799859'
}
}
}
</script>

结果:

2017-07-23 16:50:59

vue 日期时间过滤器的更多相关文章

  1. vue 日期格式化过滤器

    formateDate日期格式化,写在公共的js中: export function formateDate(date, fmt){ if ('/(y+)/'.test(fmt){ fmt = fmt ...

  2. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

  3. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  4. vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  5. 关于 vue 日期格式的过滤

    最近也在写公司几个单独页面,数据量比较,让前端来做,还不让angular,jquery? no no no~  对于一个前端来说绑数据那么麻烦的一款 “经典的老东西“ ,我才不用, SO~  vue ...

  6. Vue2.0如何自定义时间过滤器

    我们知道Vue2.0开始不再支持自带的过滤器,需要我们自己去自定义过滤器,方法如下:           我们可以自己定义一个时间过滤器,在此引用了一个日期处理类库(Moment.js)可以很快的实现 ...

  7. ASP.NET MVC下使用AngularJs语言(九):日期时间处理与显示

    当在angularjs去显示一个时间时,如原原本本去显示这个值,它将显示一个怪怪的字符串,其实它就是被系列化json之后的字符串.如:一个空值显示为日期时间: 如果非空值显示为日期时间的情形: 为了能 ...

  8. vue教程2-06 过滤器

    vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...

  9. EasyUI datagrid 日期时间格式化

    EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...

随机推荐

  1. asp.net core系列 46 Identity介绍

    一. Identity 介绍 ASP.NET Core Identity是一个会员系统,可为ASP.NET Core应用程序添加登录功能.可以使用SQL Server数据库配置身份以存储用户名,密码和 ...

  2. 锁开销优化以及 CAS 简单说明

    锁开销优化以及 CAS 简单说明 锁 互斥锁是用来保护一个临界区,即保护一个访问共用资源的程序片段,而这些共用资源又无法同时被多个线程访问的特性.当有线程进入临界区段时,其他线程或是进程必须等待. 在 ...

  3. docker(5):数据的管理

    Docker的volume卷 为了能持久话保存和共享容器的数据. 使用docker volume卷的两种方式 1:数据卷 2:数据卷容器 1:数据卷 数据卷:数据卷会绕过docker 的ufs 直接写 ...

  4. SoEasyPlatform 代码生成器

    介绍 一款轻量级开源的代码生成器,相对较动软代码生成器而言要轻量的多,支持多种数据库,所用到dll组件也都在github有源码,代码非常的简单有点基础的看源码可以把生成的项目改成自已的风格. 特色 该 ...

  5. 学习python的第一天

    2019.4.25自我总结 一.Typora 关于用Typora 自我感觉良好,基本快捷键也比较简单,ps:还是要多用用 二.编程 1.编程语言 是用来定义计算机程序的形式语言.它是一种被标准化的交流 ...

  6. Java 在PDF文档中绘制图形

    本篇文档将介绍通过Java编程在PDF文档中绘制图形的方法.包括绘制矩形.椭圆形.不规则多边形.线条.弧线.曲线.扇形等等.针对方法中提供的思路,也可以自行变换图形设计思路,如菱形.梯形或者组合图形等 ...

  7. com.mysql.jdbc.Driver 和 com.mysql.cj.jdbc.Driver的区别

    com.mysql.jdbc.Driver 是 mysql-connector-java 5中的,com.mysql.cj.jdbc.Driver 是 mysql-connector-java 6中的 ...

  8. 产品经理之UML表达业务逻辑

    文章大纲 一. 什么是UML二. UML基础介绍三.UML实例介绍四.参考文档   一. 什么是UML   UML(Unified Modeling Language,统一建模语言) 是一种在软件设计 ...

  9. 不同数据库的表迁移SqlServer

    INSERT INTO table  SELECT *  FROM  OPENDATASOURCE ('SQLOLEDB', 'Data Source=172.168.44.146;User ID=s ...

  10. springboot 多线程执行

    一.springboot开线程执行异步任务 1.Spring通过任务执行器TaskExecutor,来实现多线程和并发编程,使用ThreadPoolTaskExecutor可实现一个基于线程池的Tas ...