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

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

第一种:

  1. // template
  2. {{date | formatDate}}
  3.  
  4. //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)
}

  1.  

第二种:

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

结果:

  1. 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. 微服务架构 - 离线部署k8s平台并部署测试实例

    一般在公司部署或者真实环境部署k8s平台,很有可能是内网环境,也即意味着是无法连接互联网的环境,这时就需要离线部署k8s平台.在此整理离线部署k8s的步骤,分享给大家,有什么不足之处,欢迎指正. 1. ...

  2. “==”、“equals()”、“hashcode()”之间的秘密

    前言 万丈高楼平地起,今天的聊点基础而又经常让人忽视的话题,比如“==”与“equals()”区别?为何当我们重写完"equals()"后也要有必要去重写"hashcod ...

  3. 游戏服务器h2engine架构优化和跨平台设计

    H2engine的GitHub星星不知不觉已经破百了,也没有特意推广过,但是慢慢的关注的人越来越多.因为事情多,好久没有写东西了,前一段时间有了一些想法,把h2engine又更新了一下,感觉h2eng ...

  4. [PHP] 使用反射实现的控制反转

    搬家进程中反射实现控制反转,样做的好处是可以通过配置项动态的控制下面那个类的属性 1.$this->getObject($class, $config->getConfig('param' ...

  5. 动态路由协议(RIP)

    虽然静态路由在某些时刻很有用,但是必须手工配置每条路由条目,对于大中型的网络或拓补经常发生变化的清空,配置和维护静态路由的工作量就变得非常繁重,而且不小心还容易出错,因此就需要一种不需要手工配置的路由 ...

  6. 驰骋工作流引擎-底层开发API 说明文档

    驰骋工作引擎-底层开发API 登录与门户API 首先要进行代码集成与组织机构的集成 其次在自己的系统登录界面,登录成功后要执行ccbpm的框架登录. 所谓的登录就是调用ccbpm的登录接口,如左边的代 ...

  7. Ambari自定义Service

    一.Ambari基本架构   img016.jpg Ambari Server 会读取 Stack 和 Service 的配置文件.当用 Ambari 创建服务的时候,Ambari Server 传送 ...

  8. spring集成shiro登陆流程(上)

    上一篇已经分析了shiro的入口filter是SpringShiroFilter, 那么它的doFilter在哪儿呢? 我们看到它的直接父类AbstractShrioFilter继承了OncePerR ...

  9. 跟我一起学opencv 第三课之图像在opencv中的表示-Mat对象

    1.下面第一章图是一位美女图像,和其他数据一样图像在计算机中也是以二进制存储,下面第二张图 2.在摄像头眼里一幅图像就是一个矩阵或者说是二维数组,数组元素是像素值 3.opencv中以Mat对象表示图 ...

  10. Mysql监控工具介绍-Monyog

    MONyog监控工具 MONyog是一个优秀的MySQL监控工具,可以实时监测MYSQL服务器,查看MySQL服务器的运行状态. 支持查询分析功能,能够轻松找出有MySQL的问题所在,此外,还可以帮助 ...