来自: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. 多租户实现之基于Mybatis,Mycat的共享数据库,共享数据架构

    前言 SaaS模式是什么? 传统的软件模式是在开发出软件产品后,需要去客户现场进行实施,通常部署在局域网,这样开发.部署及维护的成本都是比较高的. 现在随着云服务技术的蓬勃发展,就出现了SaaS模式. ...

  2. redis一致性hash算法理解

    一般算法: 对对象先hash然后对redis数量取模,如果结果是0就存在0的节点上. 1.2同上,假设有0-3四个redis节点.20个数据: 进行取模后分布如下: 现在因为压力过大需要扩容,增加一台 ...

  3. 接口测试心得--签名处理(Python)

    一.背景 最近负责的项目接口签名规则做了调整,第一次接触“2次认证“的方式,正好有时间,记录一下. 测试的服务A有一部分接口需要给第三方调用,这样需要对第三方有个认证,认证是由一个公共服务(API鉴权 ...

  4. WebSocket协议详解与c++&c#实现

    摘要: 随着手机游戏.H5游戏以及微信小游戏的普及,越来越多的客户端-服务器端的通讯采用websocket协议.Websocket协议是全双工的.基于数据帧的.建立在tcp之上的长连接协议.Webso ...

  5. 强化学习(十四) Actor-Critic

    在强化学习(十三) 策略梯度(Policy Gradient)中,我们讲到了基于策略(Policy Based)的强化学习方法的基本思路,并讨论了蒙特卡罗策略梯度reinforce算法.但是由于该算法 ...

  6. 从零到一详聊如何创建Vue工程及遇到的常见问题

    前言 本文也会在github上我的web-study仓库中同步更新,欢迎star. 戳这里,传送 准备工作 判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm in ...

  7. Java多线程与并发面试题

    1,什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成一 ...

  8. asp.net core 系列之中间件基础篇(middleware)

    中间件是一种插入到管道上进行处理请求和响应的软件:每个中间件组件具有下面的功能: 选择是否把请求传递到管道上的下一个组件 可以在下一个组件的之前和之后做处理工作 请求委托(request delega ...

  9. EFCore中 join on的不同

    当 多条件 left join on 时 LEFT OUTER JOIN on new { u.UserId, ue.ExamId } equals new { sac.UserId, sac.Exa ...

  10. window下编译jcef

    自行编译jcef过程中遇到了一些问题,现在记录如下. 参考的主要文章是jcef的官方介绍: https://bitbucket.org/chromiumembedded/java-cef/wiki/B ...