<template>
  <div class='home-page'>内容</div>
</template>

<script >
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  setup () {
    function getCurrentMonthFirst () {
      var date = new Date()
      date.setDate(1)
      var month = parseInt(date.getMonth() + 1)
      console.log(month)
      var day = date.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      console.log(day)
      console.log(date.getFullYear() + '-' + month + '-' + day)
      return date.getFullYear() + '-' + month + '-' + day
    }

    function getCurrentMonthLast () {
      var date = new Date()
      var currentMonth = date.getMonth()
      console.log('currentMonth', currentMonth)
      var nextMonth = ++currentMonth
      console.log('currentMonth', nextMonth)
      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
      console.log('nextMonthFirstDay', nextMonthFirstDay)
      var oneDay = 1000 * 60 * 60 * 24
      var lastTime = new Date(nextMonthFirstDay - oneDay)
      console.log(lastTime)
      var month = parseInt(lastTime.getMonth() + 1)
      var day = lastTime.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      console.log(date.getFullYear() + '-' + month + '-' + day)
      return date.getFullYear() + '-' + month + '-' + day
    }
    onMounted(() => {
      getCurrentMonthFirst()
      getCurrentMonthLast()
    })
    return { getCurrentMonthFirst, getCurrentMonthLast }
  }
})
</script>

<style lang='less'>
.home-page {
  height: 100px;
  border: 1px solid red;
}
</style>