Vue格式化从后台传过来的时间格式

22 篇文章 0 订阅

1.下载组件(使用淘宝镜像)

cnpm i moment --save

2.在main.js文件引入

import moment from ’moment‘

3.在main.js文件里面做如下配置

//全局过滤器
Vue.filter(‘dateFmt‘, (input, formatString = "YYYY-MM-DD") => {
    //es5函数参数设置默认值
    //const lastFormatString = formatString || 

    
     // moment(input) 把时间字符串转成时间对象
     // format(formatString) 把时间对象,按照指定格式,格式化成符合条件的字符串
    return moment(input).format(formatString)
})

main.js代码如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import moment from 'moment'
import resource from 'vue-resource'
Vue.use(resource)

//全局过滤器  时间过滤
Vue.filter("dateFmt", (input, formatString = "YYYY-MM-DD") => {
    //es5函数参数设置默认值
    //const lastFormatString = formatString || 

    
     // moment(input) 把时间字符串转成时间对象
     // format(formatString) 把时间对象,按照指定格式,格式化成符合条件的字符串
    return moment(input).format(formatString)
})

Vue.http.options.emulateJSON = true;
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

因为moment插件是全局注册,所以我们可以在任意组件中轻松的使用
使用格式如下

{{item.time | dateFmt(‘YYYY-MM-DD HH:mm:ss‘)}}
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pumpkin的玄学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值