我們?cè)谇袚Q月份的時(shí)候，希望高亮顯示在每個(gè)月的第一天上面，這樣的效果我們要怎么來實(shí)現(xiàn)，其實(shí)也很簡(jiǎn)單，我們先看下實(shí)現(xiàn)的效果

實(shí)現(xiàn)效果

代碼實(shí)現(xiàn)

原理就是獲取到每月的第一天日期，然后再跟整個(gè)的數(shù)據(jù)進(jìn)行對(duì)比，添加高亮的css樣式即可

handleMinusMonth() {if (this.month == 1) {this.year--;this.month = 12;} else if (this.month > 12) {this.year++;this.month = 1;} else {this.month--;}this.getDateLists();this.getFirstDay();
},
handleAddMonth() {if (this.month == 12) {this.year++;this.month = 1;} else if (this.month < 1) {this.year--;this.month = 12;} else {this.month++;}this.getDateLists();this.getFirstDay();
},
// 核心邏輯代碼
getFirstDay() {// 計(jì)算當(dāng)前月的第一天，添加高亮樣式const firstDay = dayjs(`${this.year}-${this.month}`).startOf("month").format("YYYY-MM-DD");this.daysLists = this.daysLists.flat().map((item) => {if (item.date == firstDay) {this.$set(item, "isCurrent", true);}return item;});const lists = this.daysLists.flat().map((item) => {if (item.date == firstDay) {this.$set(item, "isCurrent", true);}return item;});this.daysLists = this.changDataList(lists);
},

重新計(jì)算每次切換后年月的第一天，然后再把數(shù)據(jù)進(jìn)行flat后，對(duì)比，當(dāng)前的高亮狀態(tài)為true,否則為false,數(shù)據(jù)格式可以自行處理。