网站设计推广,微网站特效,做电商在什么网站吗,软件开发培训机构培训出来的我们在切换月份的时候#xff0c;希望高亮显示在每个月的第一天上面#xff0c;这样的效果我们要怎么来实现#xff0c;其实也很简单#xff0c;我们先看下实现的效果
实现效果 代码实现
原理就是获取到每月的第一天日期#xff0c;然后再跟整个的数据进行对比#xff…我们在切换月份的时候希望高亮显示在每个月的第一天上面这样的效果我们要怎么来实现其实也很简单我们先看下实现的效果
实现效果 代码实现
原理就是获取到每月的第一天日期然后再跟整个的数据进行对比添加高亮的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() {// 计算当前月的第一天添加高亮样式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);
},重新计算每次切换后年月的第一天然后再把数据进行flat后对比当前的高亮状态为true,否则为false,数据格式可以自行处理。
