SOURCE

    var date=new Date();
    var year=date.getFullYear();
    var day=date.getDate();
    var month=date.getMonth();
    var weekday=date.getDay();
    var themonthdays=((new Date(year,month+1)).getTime()-(new Date(year,month)).getTime())/(1000*60*60*24);

    console.log(day +','+month+','+weekday);

    console.log(themonthdays);


    var time=  new Date(year,month);
    var beginweekday=time.getDay();
    if(beginweekday==0){
      beginweekday=7;
    }
   
    console.log(beginweekday);

    var arr=[];

    for(var i=1;i<beginweekday;i++){
        arr.push({text:"_"})
    }

    for(i=1;i<=themonthdays;i++){
        arr.push({text:i})
    }

    var lastThreeMonth=date.getMonth()-3;
    console.log(lastThreeMonth);

    monthsList=[];

    for(i=0;i<7;i++){
        var nowMonth = new Date(year,lastThreeMonth+i);
        monthsList.push({'year':nowMonth.getFullYear(),'month':nowMonth.getMonth()+1})
    }
    console.log(monthsList)



    var app=new Vue({
        el:'#app',
        data :{
            nowIndex:3,
            arr:arr,
            day:day,
            beginweekday:beginweekday,
            monthsList:monthsList
        },
        methods:{
            changeMonth:function(item,index) {
                var date=new Date(item.year,item.month-1)
                console.log(date)
                var themonthdays=((new Date(item.year,item.month)).getTime()-(new Date(item.year,item.month-1)).getTime())/(1000*60*60*24);
                var beginweekday=date.getDay();
                if(beginweekday==0){
                    beginweekday=7;
                }
                console.log(beginweekday)
                this.$data.arr=[]
                for(var i=1;i<beginweekday;i++){
                    this.$data.arr.push({text:"_"})
                }

                for(i=1;i<=themonthdays;i++){
                    this.$data.arr.push({text:i})
                }
                this.$data.nowIndex=index;
            }
        }
    })

<div id="app">
    <ul class="monthsList">
        <li v-for="(item,index) in monthsList" @click="changeMonth(item,index)" :class="{'active':index==nowIndex}">
            {{item.year+'-'+item.month}}
        </li>
    </ul>
    <ul class="head">
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
    </ul>
    <ul class="body">
        <li v-for="(item,index) in arr" :class="[{'active':item.text==day && nowIndex==3},{'beforemonth':item.text=='_'}]">
            {{item.text}}
        </li>
    </ul>
</div>

*[hidefocus],input,textarea,a{outline:none;}
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
        fieldset,img,html,body,iframe{border:0;}
        table{border-collapse:collapse;border-spacing:0;}
        li{list-style:none;}
        h1,h2,h3,h4,h5,h6{font-size:100%;}
        caption,th{font-weight:normal;font-style:normal;text-align:left;}
        em,strong{font-weight:bold;font-style:normal;}
        body,textarea,select,input,pre{font-family:arial,microsoft yahei,helvetica,sans-serif;font-size:14px;color:#555;}
        body{background:#f8f8f8;line-height:1.5em;-webkit-text-size-adjust:none;}
        a,button{cursor:pointer;}
        textarea{resize:none;overflow:auto;}
        pre{white-space:pre-wrap;}
        a{color:#333;text-decoration:none;}
        input{
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-user-modify: read-write-plaintext-only;
        }
        button {
            -webkit-tap-highlight-color: rgba(255,255,255,0)
        }

        body {
            background-color: #ffffff;
        }
#app{
  margin:0 auto;
  width:770px;
}

        ul {
            width: 770px;
            overflow: hidden;
        }
        li {
            width: 100px;
            box-sizing: border-box;
            padding-right: 5px;
            cursor: pointer;
        }

        .head li,.body li {
            text-align: right;
            list-style: none;
            float: left;
        }
        .head li {
            margin-right: 10px;
        }
        .body li {
            font-size: 12px;
            margin-right: 10px;
            height: 100px;
            background-color:#ffffff;
            border-top: 2px solid #cccccc;
        }
        .body li:hover {
            border-color: blue;
            background-color: #00fff0;
            opacity: 0.5;
        }
        .body li.active{
            border-color: blue;
            background-color: #00fff0;
            opacity: 0.5;
        }
        li.beforemonth {
            background-color:#f8f8f8;
        }

        .monthsList li{
            float: left;
            border: 1px solid #cccccc;
        }
        .monthsList li.active{
            border-color: #61a1bc;
            color: #61a1bc;
        }