跳转至

JavaScript时间库Moment.js

{% note info %} 中文网站：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)
})
  1. 模版中使用
<!-- 显示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>

参考