JavaScript时间库Moment.js

中文网站：http://momentjs.cn
MomentJS 是一个 JavaScript 库,它有助于以非常简单的方式解析、验证、操作和显示 JavaScript 中的日期/时间。

Vue 项目中全局引入 moment

1. 安装 moment：

   npm install moment --save

2. 在 Vue 项目中创建一个 main.js 文件，并在该文件中添加以下代码：

   import Vue from 'vue'
   import moment from 'moment'
   
   Vue.prototype.$moment = moment

   以上代码中，我们通过 ES6 的 import 语法将 moment 引入，再通过 Vue.prototype 将 moment 挂载到 Vue 的原型上，这样在项目中就可以通过 this.$moment 访问 moment 库的方法了。
3. 在组件中使用 moment：

   <template>
     <div>
       当前时间是：{{ time }}
     </div>
   </template>
   
   <script>
   export default {
     data () {
       return {
         time: ''
       }
     },
     created () {
       this.time = this.$moment().format('YYYY-MM-DD HH:mm:ss')
     }
   }
   </script>

   以上代码中，我们在组件的 created 钩子中使用了 this.$moment() 获取当前时间，并通过 format 方法格式化成需要的时间格式，并将其赋值给组件的 time 数据，随后在模板中展示出来。

这样就完成了在 Vue 项目中全局引入 moment 的操作。

全局过滤器

1. main.js 中进行全局过滤器定义

// 导入时间插件momentjs
import moment from 'moment'

// 定义时间格式全局过滤器
Vue.filter('dateFormat', function (daraStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(daraStr).format(pattern)
})

2. 模版中使用

<!-- 显示2019-12-05 10:10 -->
 <div class="time">{{nowDate | dateFormat('YYYY-MM-DD HH:mm')}}</div>
 <!-- 显示10:10 -->
 <div class="time">{{nowDate | dateFormat('HH:mm')}}</div>
 <!-- 显示2019-12-05 10:10:10 -->
 <div class="time">{{nowDate | dateFormat}}</div>

参考

• vue 全局引入 moment：https://juejin.cn/s/vue%20%E5%85%A8%E5%B1%80%E5%BC%95%E5%85%A5%20moment
• vue+moment.js使用：https://segmentfault.com/a/1190000021200938