前端vue实现获取七天时间和星期几功能

• 功能展示

• 代码

<div  v-for="(item,index) in same_week" :class="[same_day==item.date? 'activ' :'','dis']"   @click="select(item)" :key='index'>
 <span>{{item.name}}</span>
 <span>{{item.week}}</span>
</div>

data数据

 week:[],
 same_week:[],//保存当前最新的时间
 same_day:'',//当天的时间

• 在vue周期执行

  created() {
    // 默认显示当天前一周的数据
    let data=[]
    this.start=this.getDay(+7);
    this.end=this.getDay();
    for(let i=6;i>=0;i--){
      data.push(this.getDay(+i))
    }
   var date=data.reverse()//得出一周的日期进行排序
   this.week=date;
   var date=this.week;
   var pkc=[];/* 用于存储展示的日期数据 */
   var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
   date.forEach((item,index)=>{//循坏日期
      var f=new Date(item);
      var week=f.getDay()//计算出星期几
    var str1=item.split('/');
    var strs=str1[1]+'/'+str1[2];

      var weeks=weekday[week]/* 将计算出来的时间带入数字得出中文 */
      var time= Math.round(new Date(item) / 1000)//时间戳转换
      var s={}//用于存储每个日期对象
      s.date=item;
      s.name=strs;
      s.week=weeks;
      s.times=time;
      pkc.push(s)
   })
   this.same_week=pkc;
   //pkc存储着今天的年月日星期几，时间戳等
    this.same_day=pkc[0].date;//今天的数据
  },

methods事件

getDay(day){
     　　var today = new Date();
     　　var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
     　　today.setTime(targetday_milliseconds); //注意，这行是关键代码
     　　var tYear = today.getFullYear();
     　　var tMonth = today.getMonth();
     　　var tDate = today.getDate();
     　　tMonth = this.doHandleMonth(tMonth + 1);
     　　tDate =  this.doHandleMonth(tDate);
     　　return tYear+"/"+tMonth+"/"+tDate;
     },
     doHandleMonth(month){
     　　var m = month;
     　　if(month.toString().length == 1){
       　　m =month;
     　　}
     　　return m;
     　　
     },

也参考大神们的方法进行改进更合适项目