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

红太狼 2021-10-30 00:48 504阅读 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‘)}}

发表评论取消回复

表情：

评论列表（有 0 条评论，504人围观）

还没有评论，来说两句吧...

相关阅读

相关更改后台传过来数据的对象名

解构默认值后台传过来的json对象中，有一个对象名我像改成跟我的对象名字一致的一个名字。我的对象名字是mcPatientInfoInput ，后台传给我的是mcP

Dear 丶/ 2023年02月20日 02:14/ 0 赞/ 32 阅读

相关 VUE 格式化日期格式

// 格式化日期格式 1 filters: { formatDate: function (value) {

清疚/ 2022年12月04日 07:53/ 0 赞/ 299 阅读

相关 JavaScript前台页面使用jsjava对后台传过来的日期进行格式化

在JavaScript中格式化日期还是一个很麻烦的事情，尤其是后台传过来的数据。今天介绍一个js的日起格式化工具jsjava。目前最新版为2.2，不过没有2.0好用，推

冷不防/ 2022年07月19日 11:49/ 0 赞/ 193 阅读

相关 JS遍历后台传过来的JSON数据

这两天解决了一下ssh框架的json数据传输问题. 第一步：首先，在ssh框架中要想传输json数据，必须导入相关的依赖包，以下是我使用的版本的系列（由于jar包版

清疚/ 2022年06月07日 05:10/ 0 赞/ 328 阅读

相关 vue时间格式化

1 安装 ![20181114141756361.png][] 2.全局引入 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

╰+哭是因爲堅強的太久メ/ 2022年04月17日 06:58/ 0 赞/ 291 阅读

相关 Vue时间格式化

format.js export const formatDateTime = (date, fmt) => { if (!date) {

素颜马尾好姑娘i/ 2022年03月27日 03:23/ 0 赞/ 341 阅读

相关 Vue教程09(过滤器应用-时间格式字符串格式化)

在前面我们介绍了vue的综合小案例把前面介绍的一些常用指令我们综合运用了一下，但是还有个小问题，就是显示的’创建时间 cTime’的格式没有处理，虽然我们可以在后台服务处理

青旅半醒/ 2021年12月09日 08:10/ 0 赞/ 294 阅读

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

1.下载组件（使用淘宝镜像） cnpm i moment --save 2.在main.js文件引入 import moment from ’moment

红太狼/ 2021年10月30日 00:48/ 0 赞/ 505 阅读

相关 vue 时间格式化

前段时间利用vue实现数据在页面上的显示，我本人比较喜欢用谷歌浏览器，但是测试就是不用，用的360 ，说我页面上显示的时候时间存在问题 ![watermark_type_Zm

电玩女神/ 2021年10月18日 20:22/ 0 赞/ 501 阅读

相关 vue格式化时间

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

朴灿烈づ我的快乐病毒、/ 2021年09月09日 02:00/ 0 赞/ 540 阅读