SOURCE

var vue = new Vue({
    el: '#app',
    data: {
        id: 15,
        data: []
    },
    methods: {
        getDate(v) {
            if (v.is_disable || v.is_empty) {
                alert('不能选中');
                return false;
            } 
            vue.id = v.id;
        }
    },
    mounted() {
        $.get(
            "http://dev.haoyuanfl.com/index/member/price?obj_id=12&type=1&token=79442cc934f7264f92be459dc9e32826070b7db7&uid=3644",
            function (res) {
                res.data.forEach((item, index) => {
                    var obj = {};
                    var firstDate = item[1].date;
                    var week = new Date(firstDate).getDay();

                    var year = item[1].date.split('-');
                    var date = `${year[0]}年${year[1]}月`;

                    obj.content = item;
                    obj.date = date;
                    vue.data.push(obj);
                })

            });
    }
})

<div id="app">
  <div class="date-page">
    <div class="week">
      <span>
        日
      </span>
      <span>
        一
      </span>
      <span>
        二
      </span>
      <span>
        三
      </span>
      <span>
        四
      </span>
      <span>
        五
      </span>
      <span>
        六
      </span>
    </div>
    <div class="date-wrapper">
      <div class="calender-month" v-for="(item1,index1) in data" :key="index1">
        <p class="date-title">
          {{item1.date}}
        </p>
        <div class="month-day">
          <div :class="{'active':id == v.id,disable:1==v.is_disable,is_empty:1 == v.is_empty}"
          class="day-item" v-for="(v,k) in item1.content" :key="k" @click='getDate(v)'
          :id=v.id>
            <div class="above">
              <span class="day">
                {{k}}
              </span>
              <span class="amount">
                充足
              </span>
            </div>
            <span class="price-color">
              ￥{{v.price}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    .date-page .week {
      position: relative;
      text-align: center;
      font-size: 3.2vw;
      color: #727171;
      display: -webkit-box;
      display: -ms-flexbox; 
      display: flex;
      height: 9.2vw;
      line-height: 9.2vw
    }

    .date-page .week span {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1
    }

    .date-page .week:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      -webkit-transform: translateY(.5);
      transform: translateY(.5);
      background: #efefef
    }

    .date-page .date-wrapper .date-title {
      font-size: 3.733vw;
      color: #595757;
      height: 8vw;
      text-align: center;
      line-height: 8vw
    }

    .date-page .date-wrapper .month-day {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap
    }

    .date-page .date-wrapper .month-day .day-item {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 14.28571429%;
      flex: 0 0 14.28571429%;
      padding: 2.667vw 0
    }

    .date-page .date-wrapper .month-day .day-item .above {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin-bottom: 1.333vw
    }

    .date-page .date-wrapper .month-day .day-item .above .amount {
      color: #1b1
    }

    .date-page .date-wrapper .month-day .day-item .above .day {
      font-size: 3.2vw;
      margin-right: 2vw;
      color: #545454
    }

    .date-page .date-wrapper .month-day .day-item .price-color {
      font-size: 2.667vw;
      margin-left: 1.333vw;
      color: #ff664f
    }

    .date-page .date-wrapper .month-day .day-item.active {
      background: #36c0fe
    }

    .date-page .date-wrapper .month-day .day-item.active .above .amount,
    .date-page .date-wrapper .month-day .day-item.active .above .day,
    .date-page .date-wrapper .month-day .day-item.active .price-color {
      color: #fff
    }

    .date-page .date-wrapper .month-day .disable.day-item .amount,
    .date-page .date-wrapper .month-day .disable.day-item .price-color,
    .date-page .date-wrapper .month-day .is_empty.day-item .amount,
    .date-page .date-wrapper .month-day .is_empty.day-item .price-color {
      display: none
    }