moment 获取当前月日历

<template>

<div>
  <div style="width:100%;background:rgb(255,255,255);">

    <table cellpadding="0" cellspacing="0" id="1">
      <tr>
          <td>
              <div id="cal">
                <div id="top">{{date}}</div>

                <ul id="wk">
                    <li><b>日</b></li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li><b>六</b></li>
                </ul>

                <ul id="wk" v-for="item in arr" :key="item.id">
                    <li ><span :class="item[0].day == date.substring(8) ? 'choose' :''">{{item[0].day}}</span>&nbsp;</li>
                    <li><span :class="item[1].day == date.substring(8) ? 'choose' :''">{{item[1].day}}</span>&nbsp;</li>
                    <li><span :class="item[2].day == date.substring(8) ? 'choose' :''">{{item[2].day}}</span>&nbsp;</li>
                    <li><span :class="item[3].day == date.substring(8) ? 'choose' :''">{{item[3].day}}</span>&nbsp;</li>
                    <li><span :class="item[4].day == date.substring(8) ? 'choose' :''">{{item[4].day}}</span>&nbsp;</li>
                    <li><span :class="item[5].day == date.substring(8) ? 'choose' :''">{{item[5].day}}</span>&nbsp;</li>
                    <li><span :class="item[6].day == date.substring(8) ? 'choose' :''">{{item[6].day}}</span>&nbsp;</li>
                </ul>
                <div id="bm"></div>

              </div>
          </td>
      </tr>
    </table>
  </div>

</div>


</template>

<script>

  import moment from 'moment'
  export default {
    data() {
        return{
           currentMonthDays:'',
           currentWeekday:'',
           lastMonthDays:'',
           date:'2019-06-06',
           arr:[],
        }
    },
    methods: {
      getData(){
      this.currentWeekday = moment(this.date).date(1).weekday(); // 获取当月1日为星期几
      console.log(this.currentWeekday);
      this.lastMonthDays = moment(this.date).subtract(1, 'month').daysInMonth(); // 获取上月天数
      console.log(this.lastMonthDays);
      this.currentMonthDays = moment(this.date).daysInMonth(); // 获取当月天数
      console.log(this.currentMonthDays);
      //总天数是31，1号是周五或者周六6个[]
        //总天数是30，1号是周六6个[]
      if((this.currentMonthDays == '31' && this.currentWeekday == '5' || this.currentWeekday == '6' ) || (this.currentMonthDays == '30' && this.currentWeekday == '6')){
          var daysArr = [[], [], [], [], [], []];
        }else{
          var daysArr = [[], [], [], [], []];
        }
      // const getDay = day => (day <= this.lastMonthDays ? day : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : day - (this.lastMonthDays + this.currentMonthDays)); // 日期处理       
      const getDay = day => (day <= this.lastMonthDays ? '' : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : ''); // 日期处理
      
      for (let i = 0; i < 7; i += 1) {
        let virtualDay = (this.lastMonthDays - this.currentWeekday) + i + 1;
        for (let j = 0; j < daysArr.length; j += 1) {
          daysArr[j][i] = {'day':getDay(virtualDay + (j * 7))};
        }
      }
    console.table(daysArr);
    this.arr = daysArr

      }
    },
    mounted () {
      this.getData()
    }

}

</script>

<style>
*{margin:0;padding:0;  list-style:none }
.choose{
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  background: #429e6c;
  color: #fff;
  border-radius: 50%;
}

#cal {
    width: 99%;
    font-size: 12px;
    margin: 8px 0 0 15px;position: relative;
}

#cal #top {
    height: 40px;
    line-height: 40px;
    background: #429e6c;
    border: 1px solid #429e6c;
    color: #fff;
    padding: 0 10px;
    clear: both;
}
#cal ul#wk {
    margin: 0;
    padding: 0;
    height:50px;
    color: #888;
    font-size: 14px;
    border-left: 1px solid #429e6c;
    border-right: 1px solid #429e6c;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#cal ul#wk li {
  width: 48px;
}
#cal ul#wk li span {
  color: black;
  font-weight: bold;
}
#cal ul#wk li b {
    font-weight: normal;
    color: #429e6c;
}
#cal #bm {
    text-align: right;
    height: 30px;
    line-height: 30px;
    padding: 0 13px 0 0;
    border-bottom:1px solid #429e6c;
    border-left:1px solid #429e6c;border-right:1px solid #429e6c;
    clear: both;
    padding: 0 10px;
    font-size: 14px;
}
</style>