Vue项目中使用moment.js

最新推荐文章于 2024-07-23 11:05:43 发布

写写代码AAA

最新推荐文章于 2024-07-23 11:05:43 发布

阅读量6.9k

点赞数 3

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_28988969/article/details/105177843

版权

本文介绍了如何在Vue项目中集成和使用moment.js。首先，提供了moment.js的官网链接，然后指导通过vue ui安装依赖，并在项目src目录下创建dependences目录及配置moment.js。接着说明在main.js中导入moment.js，并创建一个MomentDemo.vue组件来展示使用示例。建议详细使用参照官方文档。

摘要由CSDN通过智能技术生成

moment.js官网地址

http://momentjs.cn

安装依赖

打开命令行,输入vue ui,打开可视化界面

依赖>安装依赖>运行依赖>moment
在这里插入图片描述

配置插件

在项目src目录下,新建dependences目录,新建moment.js

import Vue from 'vue'
import moment from 'moment'

// 设置本地时区
moment.locale('zh-cn')
Vue.prototype.$moment = moment

在main.js中导入moment.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入moment.js
import './dependences/moment.js'

Vue.config.productionTip = false

new Vue({
   
  router,
  render: h => h(App)
}).$mount('#app')

使用

新建一个MomentDemo.vue

<template>
  <div>
    <el-button @click="test">test</el-button>
  </div>
</template>

<script>
export default {
   
  methods: {
   
    test() {
   
      // 获取当前时间输出
      console.log(this.$moment().toDate())

      // 获取当前时间，并格式化输出
      console.log(this.$moment().format('YYYY-MM-DD HH:mm:ss'))

      // 时间相减
      console.log(this.$moment().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'))
      console.log(this.$moment().subtract(1, 'months'