最近在项目中遇到了一个需求。在vue中创建了一个组件，它显示当前日期和在当前日期要处理的项目。待处理项目的信息将在后端以接口的形式返回。

需求确定后，在这里搭建并记录。现在简单实现了，但以后一定要修改。

Vue就不多说了，原生JS用在vue

效果图(基本没有风格，很低)

现在实现是主要版本，代码中的容错，以及一些性能处理，这些都没有写。

不多说，代码：

首先是vue的html结构，非常简单。一些其他的时间形式被添加到其中，这些时间形式可以根据特定的使用场景被添加或删除

Div id=' date container ' Div class=' date _ _ shownow time '今天是span v-text=' ynow '/span year span v-text=' mnow 1 '/span月span v-text=' dnow '/span day/Div class=' now time ' button class=' premon ' @ click=' premon '上个月/button Div class=' this mon ' span v-text=' ynow '/span v-text=' mnow 1 '/span/Div button class=' Next mon ' @ click='代码中有一些关于JS代码的注释，可以根据代码的注释进行解释

导出默认{ data() { return { newDate: ' '，//当前的日期的信息ynow: ' '，//当前的年数mnow: ' '，//当前的月份dnow: ' '，//当前的天数第一天： ' ',//第一天firstnow: ' '，//当前的星期m_days: []，//每个月的天数tr_str: ' '，//行数} }，方法： { getDaysInfo(){ var _ this=this；这个。确定日期(_ this)；},是_leap(年份){//判断是不是闰年返回(year0==0？（年份@0==0?1:0):(年份%4==0?1:0));}, //下面的是画表格的方法，这个方法会根据数据画出我们需要的表格绘制表格(JSonhTMl){ var _ this=this；var str=' tr class=' xiqi ' TD class=' IsRed '星期日运输署/运输署星期一运输署/运输署星期二运输署/运输署星期三运输署/运输署星期四运输署/运输署星期五TD/TD类=' isRed '星期六/td /tr `;var idx=' '，date_str=' '，isRed=' '，HasMSg=for(var I=0；I _ this . tr _ StrI){ str=' tr '；for(var k=0；k7；k){ idx=I * 7k；isredd=(k===0 | | k===6)？isread ' :date _ str=idx-_ this。先是现在1；(date _ str=0 | | date _ strthis。m _ days[这个。)？date _ str=' : date _ str=idx-_ this。先是现在1；date_str==_this.dnow？hasMsg=' TD class=' this day ' date=' date _ str ' span class=' IsRed ' ' ' date _ str '/span/TD ' : hasMsg=' TD date=' date _ str ' span class=' IsRed ' ' ' date _ str '/span/TD '；for(var l=0，len=jsonHtml.lengthl透镜；l ) { if(date_str==jsonHtml[l].date) { var newStr='p' jsonHtml[l].msg '/p '；date_str==_this.dnow？hasMsg=' TD class=' this day ' date=' date _ str ' ' span class=' IsRed ' ' ' date _ str '/span ' Newstr '/TD ' : hasMsg=' TD date=' date _ str ' ' span class=' IsRed ' ' ' date _ str '/span ' Newstr '/TD '；} } str=HasMSg } str='/tr '；} var table=文档。getelementbyid(' table ')；table.innerHTML=str}，//两个参数代表的含义分别是这对象以及判断当前的操作是不是在进行月份的修改sureDate(_this，other){ this。新日期=新日期()；这个。ynow=这个。新的日期。getfull year()；if(！其他){这个。mnow=这个。新的日期。getmonth()；//月份}这个。dnow=这个。新的日期。getdate()；//今日日期this.firstDay=新日期(this.ynow，this.mnow，1)；这个。首先现在=这个。第一天。getday()；this.m_days=[31，28 this.is_leap(this.ynow)，31，30，31，30，31，31，30，31，30，30，31]；这个。tr _ str=数学。天花板(这个。m _ days[这个。这个。先现在)/7)；这个。show msg()；}，preMon(){ var _ this=this；这个。mnow-；this.sureDate(_this，' up ')；}，nextMon(){ var _ this=this；这个，这个。sureddate(_ this，' next ')；}, //通过接口返回的是我们当前的月份对应在日历中需要处理的事项showMsg(){ var jsonHtml=[{ date : 2，msg: '吃饭}，{ date: 3，msg: '睡觉}，{ date: 4，msg: '打豆豆}，{ date: 6，msg: '豆豆不在家}，{ date: 12，msg: ' ~ ~ ~ ~ ' }，{ date: 15，msg: '怎么办~~~' }，{ date: 20，msg: '找豆豆' }];this.drawTable(jsonHtml) } }，mounted() { //画出当前的月份的天数对应的表格这个。getdaysinfo()；//进行数据的获取，显示到对应的位置}js的代码目前的来说也就是这么多，里面只是初步实现了功能，其他什么都没进行处理~~~~

具体的实现可以访问我的开源代码库获取-点击打开链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。