我编写了一个日历,该日历显示JSON文件中的事件,并且我希望几天后显示的事件的背景为黄色。我尝试使用v-bind:class
来执行此操作,但是代码不起作用。可能是什么错误?
<template>
<div class="all">
<div class="overflow-div">
<transition :name="nameOfClass" >
<div :key="currentPage" class="fade_wrapper">
<div v-for="(week, i) in getCalendar" class="d_day">
<li v-for="day in week" class="li_day">
<div class="day"
v-bind:class="{ 'longEvent': longEvent(day) }"
v-html="[].concat(day).join('<br>')"></div>
</li>
</div>
</div>
</transition>
</div>
</div>
</template>
<script>
import json from './Calendar_data.json'
export default {
data(){
return{
currentPage: 0,
year: '',
eventsData: json
}
},
longEvent(dayNumber){
let arrOfEvents = this.eventsData.events;
for(let z = 0; z < arrOfEvents.length; z++){
let dataStartOfEvent = arrOfEvents[z].starts_at;
let getStartDataOfEvent = new Date(dataStartOfEvent);
let dataEndOfEvent = arrOfEvents[z].ends_at;
let getEndDataOfEvent = new Date(dataEndOfEvent);
if(getStartDataOfEvent.getDate() != getEndDataOfEvent.getDate()){
if((dayNumber[0] >= getStartDataOfEvent.getDate() && dayNumber[0] <= getEndDataOfEvent.getDate()) &&
this.year === getStartDataOfEvent.getFullYear() &&
(this.currentPage >= getStartDataOfEvent.getMonth() && this.currentPage <= getEndDataOfEvent.getMonth()) ){
return true;
}
}
}
},
getYear(){
this.year = this.date.getFullYear();
},
}
<style>
.longEvent{
background-color: yellow;
}
</style>