Javascript 为什么v-bind:类不能工作,尽管没有错误?
我编写了一个日历,显示JSON文件中的事件,我想让几天后显示的事件具有黄色背景。我尝试使用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
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>