vue中使用moment格式化时间

目录

一、安装moment.js

二、main.js中引入moment

三、使用

1、过滤器用法

全局过滤器

局部过滤器

2、挂载vue上

---

注意：HH和hh不一样。HH相当于hh24,hh相当于hh12 

 此外，day.js也可以实现类似的功能，见：Vue中使用dayjs转换时间格式并实时显示当前时间_李疆的博客-CSDN博客

一、安装moment.js

cnpm i -S moment

二、main.js中引入moment

import moment from 'moment'

三、使用

有两种方式：过滤器用法、挂载vue上

1、过滤器用法

关于过滤器的详细介绍可参考：Vue中的过滤器（filter）_李疆的博客-CSDN博客_vue过滤器

全局过滤器

main.js中注册：

Vue.filter('formatDate', function (value) {
  return moment(value).format('YYYY-MM-DD HH:mm')
})

使用：

        <el-table-column label="更新日期" prop="date" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date | formatDate}}</span>
          </template>
        </el-table-column>

效果：

局部过滤器

<template>
  <div>
    {{ new Date() | formatDate('YYYY-MM-DD HH:mm:ss') }}
  </div>
</template>

<script>
import moment from "moment"; //引入moment

export default {
  data() {
    return {};
  },
  filters: {
    formatDate(value) {
      return moment(value).format("YYYY-MM-DD HH:mm");
    }
  }
};
</script>

2、挂载vue上

main.js中引入

// 全局引入moment
import moment from "moment"
Vue.prototype.$moment = moment//挂载Vue上

使用：

this.$moment(new Date()).format("YYYY-MM-DD")

效果：

moment.js获取两个日期时间相隔多少天

moment('2019-11-21').diff(moment('2019-08-01'), 'days')

moment(Date.now()).diff(moment('2019-08-01'), 'days')