Vue项目中使用moment.js

谁践踏了优雅 2023-07-18 14:29 20阅读 0赞

# moment.js官网地址 #

[http://momentjs.cn][http_momentjs.cn]

# 安装依赖 #

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

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

# 配置插件 #

在项目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').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm:ss'))
    
          // 时间相加
          console.log(this.$moment().add(1, 'year').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().add({  months: 1 }).format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().add(1, 'hours').format('YYYY-MM-DD HH:mm:ss'))
    
    	  // 获取开始的时间
          console.log(this.$moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().startOf('hour').format('YYYY-MM-DD HH:mm:ss'))
    
    	  // 获取结束的时间
          console.log(this.$moment().endOf('year').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().endOf('month').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'))
          console.log(this.$moment().endOf('hour').format('YYYY-MM-DD HH:mm:ss'))
    
          // 获取当前月的总天数
          console.log(this.$moment().daysInMonth())
    
          // 获取年份
          console.log(this.$moment().year())
          console.log(this.$moment().get('year'))
    
          // 获取月份(0~11, 0: 一月, 11: 十一月)
          console.log(this.$moment().month())
          console.log(this.$moment().get('month'))
    
          // 获取一个月中的某一天
          console.log(this.$moment().date())
          console.log(this.$moment().get('date'))
    
          // 获取一个星期中的某一天(0~6, 0: 星期天, 6: 星期六)
          console.log(this.$moment().add(1, 'days').day())
          console.log(this.$moment().get('day'))
          // (0~6, 0: 星期一, 6: 星期天)
          console.log(this.$moment().add(2, 'days').weekday())
          console.log(this.$moment().get('weekday'))
          // (1~7, 1: 星期一, 7: 星期天)
          console.log(this.$moment().add(1, 'days').isoWeekday())
          console.log(this.$moment().get('isoWeekday'))
    
          // 获取小时
          console.log(this.$moment().hours())
          console.log(this.$moment().get('hours'))
    
          // 获取分钟
          console.log(this.$moment().minutes())
          console.log(this.$moment().get('minutes'))
    
          // 获取秒
          console.log(this.$moment().seconds())
          console.log(this.$moment().get('seconds'))
    
    	  // 获取毫秒
          console.log(this.$moment().milliseconds())
          console.log(this.$moment().get('milliseconds'))
    
    	  // 整体输出
          console.log(this.$moment().toArray())
          console.log(this.$moment().toObject())
    
          // 设置时间
          console.log(this.$moment().year(2019).format('YYYY-MM-DD HH:mm:ss'))
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    </style>

详细使用请参考官网文档：[http://momentjs.cn/docs/][http_momentjs.cn_docs]

[http_momentjs.cn]: http://momentjs.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]: /images/20230528/c0361dd1d45c432e81ca56e3d756eb31.png
[http_momentjs.cn_docs]: http://momentjs.cn/docs/