获取时间格式的方式、封装的一些函数方法

一、常用时间格式

// 2021/3/10
let time = new Date().toLocaleDateString();
// 上午10:30:00
let times = new Date().toLocaleTimeString();
// 获取当前年份    2021年
let year = new Date().getFullYear();
// 获取当前月份  月份需要+1   3月份
let month = new Date().getMonth()+1;
// 获取当前月份日期   10号
let day = new Date().getDate();
// 获取当前星期几   三
let week = new Date().getDay();
// 获取当前季度   一季度
let season =  Math.floor((this.getMonth()+3)/3);

二、Vue3获取当前时间：格式：YYYY-MM-DD hh:mm:ss

1、封装工具函数：

import { ref, onMounted, onUnmounted } from 'vue'

function dateFilter (v) {
  let m = v.getMonth() + 1
  m = m < 10 ? '0' + m : m
  let d = v.getDate()
  d = d < 10 ? '0' + d : d
  return v.getFullYear() + '-' + m + '-' + d
}

function timeFilter (v) {
  let h = v.getHours()
  h = h < 10 ? '0' + h : h
  let m = v.getMinutes()
  m = m < 10 ? '0' + m : m
  let s = v.getSeconds()
  s = s < 10 ? '0' + s : s
  return h + ':' + m + ':' + s
}

export function clock () {
  let now = new Date()
  const date = ref(dateFilter(now))
  const time = ref(timeFilter(now))
  let task
  const start = () => {
    task = setInterval(() => {
      now = new Date()
      date.value = dateFilter(now)
      time.value = timeFilter(now)
    }, 1000)
  }
  onMounted(start)
  onUnmounted(() => {
    task && clearInterval(task)
  })
  return {
    date,
    time,
    start
  }
}

2、模板页面中使用

template:

<template>
  <div class="time">
    {{ date }} {{ time }}
  </div>
</template>

javascript:

<script>
  import { clock as useClock } from '../../utils/clock'

  export default {
    name: 'time',
    setup () {
      const { date, time } = useClock()

      return {
        date,
        time
      }
    }
  }
</script>