先上图,看看效果
思路:
实现获取当前时间,新建一个data
let now = new Date();
然后需要判断显示的是否为当月时间
if (cur) { date = new Date(cur); } else { let now = new Date(); date = new Date( /指定时间/ ); }
使用vue的v-for遍历当月时间
<ul> <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 --> <li v-for="dayobject in days" :key="dayobject.index" @click="selectedDate(dayobject.day.getDate())" > <!--本月--> <!--如果不是本月 改变类名加灰色--> <span v-if="dayobject.day.getMonth() + 1 != currentMonth" class="other-month" > {{ dayobject.day.getDate() }} </span> <!--如果是本月 还需要判断是不是这一天--> <span v-else> <!--今天 同年同月同日--> <span v-if=" dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate() " class="active" >{{ dayobject.day.getDate() }}</span > <span v-else>{{ dayobject.day.getDate() }}</span> </span> </li> </ul>
如何判断一个月有多少天?
function getMonthDay(year, month) { let days = new Date(year, month, 0).getDate() return days } getMonthDay(2021, 3)