vue 获取一周时间

Frontend-Arway

于 2021-10-11 14:28:29 发布

阅读量797

点赞数

CC 4.0 BY-SA版权

分类专栏： html js 小程序文章标签： html5 javascript vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_44939080/article/details/120702409

js 同时被 3 个专栏收录

16 篇文章

订阅专栏

小程序

7 篇文章

订阅专栏

html

6 篇文章

订阅专栏

本文介绍了一个使用Vue.js编写的日历组件，展示了如何动态获取当前周的日期，并实现点击选择日期时改变样式的功能。通过`v-for`指令遍历一周的日期，结合`Date`对象处理时间，将日期和星期分别显示。同时，`dateActive`方法用于处理日期选择，更新当前选中日期的样式和值。这是一个关于前端开发，Vue.js和JavaScript交互的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面结构

	<div class="calendar_content">
                <div @click="dateActive(index)" v-for="(day,index) in week">
                  <div>{{day.xq}}</div>
                  <div :class="{ active:index==current}">{{day.ts}}</div>
                </div>
    </div>

获取时间

 gedate() {
        var currentTime = new Date();
        var nowDayOfWeek = currentTime.getDay(); //当前周的第几天
        var nowDay = currentTime.getDate(); //当前日
        var nowMonth = currentTime.getMonth(); //当前月
        var nowYear = currentTime.getFullYear(); //当前年
        currentTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1); //完整日期
        var weeks = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        for (var i = 0; i < 7; i++) {
          if (i == 0) {
            currentTime = currentTime.setDate(currentTime.getDate());
          } else {
            currentTime = currentTime.setDate(currentTime.getDate() + 1);
          }
          currentTime = new Date(currentTime);
          var currentDays = currentTime.getDate();
          var currentMon = currentTime.getMonth() + 1;
          var dateDay = currentDays //某一天
          var dates = {};
          this.currenttime = currentMon + "-" + nowDay
          dates.Monthday = currentMon + "-" + dateDay
          dates.ts = dateDay
          dates.xq = weeks[i]
          this.week.push(dates)
        }
      },

选择当前日期样式

 dateActive(index) {
        this.current = index;
        var need = this.week[index].xq //获取选中的值
        this.currenttime = this.week[index].Monthday
        console.log(need)
      },