vue element 日历

 

  <div
                v-if="calendarData[item3][data.day]!=null && data.day.split('-')[1] == item2.split('-')[1] && calendarData[item3][data.day].type == 6"
                style="background-color:#7E0023!important;height:100%;color: grey;"
              >
                {{ data.day.split('-')[2] }}
                <div style="color: black;text-align: center;font-size: 20px;color: grey;">{{ calendarData[item3][data.day].val }}
                </div>
              </div>
              <div
                v-else-if="calendarData[item3][data.day]!=null && data.day.split('-')[1] == item2.split('-')[1] && calendarData[item3][data.day].type == 5"
                style="background-color:#99004C!important;height:100%;color: grey;"
              >{{ data.day.split('-')[2] }}
                <div style="color: black;text-align: center;font-size: 20px;">{{ calendarData[item3][data.day].val }}
                </div>
              </div>
              <div
                v-else-if="calendarData[item3][data.day]!=null && data.day.split('-')[1] == item2.split('-')[1] && calendarData[item3][data.day].type == 4"
                style="background-color:rgb(255, 0, 0)!important;height:100%;color: grey;"
              >{{ data.day.split('-')[2] }}
                <div style="color: black;text-align: center;font-size: 20px;">{{ calendarData[item3][data.day].val }}
                </div>
              </div>
              <div
                v-else-if="calendarData[item3][data.day]!=null && data.day.split('-')[1] == item2.split('-')[1] && calendarData[item3][data.day].type == 3"
                style="background-color:#FF7E00!important;height:100%;color: grey;"
              >{{ data.day.split('-')[2] }}
                <div style="color: black;text-align: center;font-size: 20px;">{{ calendarData[item3][data.day].val }}
                </div>
              </div>
              <div
                v-else-if="calendarData[item3][data.day]!=null && data.day.split('-')[1] == item2.split('-')[1] && calendarData[item3][data.day].type == 2"
                style="background-color:#FFFF00!important;height:100%;color: grey;"
              >{{ data.day.split('-')[2] }}
                <div style="color: black;text-align: center;font-size: 20px;">{{ calendarData[item3][data.day].val }}
                </div></div>
              <div
                v-else-if="calendarData[item3][data.day]!=null && data.day.split('-')[1] == item2.split('-')[1] && calendarData[item3][data.day].type == 1"
                style="background-color:#00E400!important;height:100%;color: grey;"
              >{{ data.day.split('-')[2] }}
                <div style="color: black;text-align: center;font-size: 20px;">{{ calendarData[item3][data.day].val }}
                </div>
              </div>
              <div
                v-else
                style="color: grey;"
              >{{ data.day.split('-')[2] }}</div>
            </template>
          </el-calendar>
        </div>