渲染日历，点击日期设置样式（利用数组的indexOf()方法） class动态绑定类名

<template>
  <div class="container">
    <!-- 日历 -->
    <div style="padding: 20px;">
      <el-button @click="setDate">设置日期</el-button>
      <ul>
        <li v-for="(item, index) in this.calendarData" :key="item.monthId">
          <h5>{{item.monthId}}</h5>
          <div class="item_label">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
          </div>
          <div class="item_list">
            <!-- 根据字段weekDesc 判断每月第一天是周几，前面空几个空格 -->
            <p
              v-for="(item2, index2) in item.dateList[0].weekDesc*1 === 7 ? 0 : item.dateList[0].weekDesc*1"
              :key="index2"
            ></p>
            <!-- 循环月，每月的天数即为i+1 -->
            <span
              ref="spanStyle"
              v-for="(item1, i) in item.dateList"
              :key="item1.dayId"  
              :id="setStyle(item1)"
              :class="{'active':vallist.indexOf(item1)>-1}"
              @click="clickEvents(item1, index, i)"
            >{{ i + 1 }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import calendarData from './data.json'
export default {
  data() {
    return {
      calendarData: JSON.parse(JSON.stringify(calendarData.data)), //2020年数据，渲染日历
      indexList: [],
      vallist: []
    }
  },
  created() {},
  methods: {
    //根据当前天的字段设置样式,设置id名，工作日，休息日，节假日分别是3种颜色, 还有已经过去的为灰色不可点击
    setStyle(item) {
      //获取当前面年月日，设置当前 （以后写代码认真一点ok？小细节的地方一定要认真一点）
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var todayDate = `${year}-${month}-${day}`
      
      if (item.dayId === todayDate) {
        return 'today'
      } else if (item.overFlag === '0') {
        return 'grey'
      } else if (item.dayType === '2') {
        return 'red'
      } else if (item.dayType === '3') {
        return 'blue'
      }
    },
    //点击日期，得到当前选中的这一项（val）,并将它选中的设置类名active,可以多选，再次点击取消选择，并将选中的每一项val，push到一个数组里
    clickEvents(val, i1, i) {
      //let arrIndex = this.indexList.indexOf(i1 + '-' + i)
      let arrIndex = this.vallist.indexOf(val)
      console.log(arrIndex)
      if (arrIndex === -1) {
        //this.indexList.push(i1 + '-' + i)
        this.vallist.push(val)
      } else {
        //this.indexList.splice(arrIndex, 1)
        this.vallist.splice(arrIndex, 1)
      }
      //console.log(this.indexList)
      console.log(this.vallist)
    },
    setDate() {
      console.log(this.vallist)
      var dayIds = []
      this.vallist.forEach(item => {
        dayIds.push(item.dayId)
      });
      console.log(dayIds.join(','))
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.active {
  background-color: brown !important;
  border-radius: 3px;
  color: white !important;
}
#today {
  background-color: #409eff;
  border-radius: 3px;
  color: white;
}
#grey {
  color: gray !important;
  pointer-events: none;
}
#blue {
  color: rgb(49, 134, 245);
}
#red {
  color: brown;
}

ul,
li {
  list-style-type: none;
}

ul {
  height: 100%;
   100%;
  display: flex;
  flex-wrap: wrap;
  li {
    border: 1px solid grey;
     23%;
    box-sizing: border-box;
    margin: 10px;
    h5 {
      text-align: center;
      height: 40px;
      line-height: 40px;
      font-size: 15px;
      color: grey;
    }
    .item_label,
    .item_list {
      display: flex;
      flex-wrap: wrap;
      p {
         14.285%;
        height: 30px;
      }
      span {
        display: block;
        box-sizing: border-box;
         14.285%;
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
      span:hover {
        cursor: pointer;
      }
    }
  }
}

.serach {
  height: 33px;
   58px;
}
.container-moddle {
  padding: 20px;
  padding-bottom: 0;
  .el-button--danger {
    height: 33px;
     80px;
  }
}
</style>