Javascript 为什么v-bind:类不能工作,尽管没有错误?

Javascript 为什么v-bind:类不能工作,尽管没有错误?,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我编写了一个日历,显示JSON文件中的事件,我想让几天后显示的事件具有黄色背景。我尝试使用v-bind:class来实现这一点,但代码不起作用。可能是什么错误 从“./Calendar\u data.json”导入json 导出默认值{ 数据(){ 返回{ 当前页面:0, 年份:'', eventsData:json } }, 长事件(日数){ 让arrOfEvents=this.eventsData.events; for(设z=0;z=getStartDataOfEvent.get

我编写了一个日历,显示JSON文件中的事件,我想让几天后显示的事件具有黄色背景。我尝试使用
v-bind:class
来实现这一点,但代码不起作用。可能是什么错误


  • 从“./Calendar\u data.json”导入json 导出默认值{ 数据(){ 返回{ 当前页面:0, 年份:'', eventsData:json } }, 长事件(日数){ 让arrOfEvents=this.eventsData.events; for(设z=0;z如果((dayNumber[0]>=getStartDataOfEvent.getDate()&&dayNumber[0]=getStartDataOfEvent.getMonth())&&this.currentPage您所说的“不工作”是什么意思?您是否已将控制台登录设置为
    longEvent
    以查看它是否实际返回
    true
    ?是否已检查DOM以查看是否已将类添加到元素中?可能是
    longEvent
    函数有问题,您是否尝试仅返回true?
        <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>