VUE遍历七天日期

vue遍历七天日期

1、vue

<div class="test">
<!-- v-for=item in items 遍历items中的数据 -->
  <div  v-for="(item,index) in same_week" :class="[same_day==item.date? 'active' :'','dis']"   @click="select(item)" :key='index'>
    <div class="time_box">
      <div class="day_box">{{item.name}}</div>
      <div class="week_box">{{item.week}}</div>
    </div>
  </div>
</div>

2、script

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

      let weeks=weekday[week]/* 将计算出来的时间带入数字得出中文 */
      let time= Math.round(new Date(item) / 1000)//时间戳转换
      let 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){
      let today = new Date();
      let targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      let tYear = today.getFullYear();
      let tMonth = today.getMonth();
      let tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate =  this.doHandleMonth(tDate);
      return tYear+"/"+tMonth+"/"+tDate;
    },
    doHandleMonth(month){
      let m = month;
      if(month.toString().length == 1){
        m =month;
      }
      return m;

    },
  

3、小小demo怎敢难到我，最后给忙碌的黛玉点个赞吧！