获取当前年月点击按钮切换年月

置顶周亚鑫

于 2024-03-07 09:57:53 发布

阅读量321

点赞数 4

分类专栏： js vue h5 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/q4717529/article/details/136525371

版权

vue 同时被 3 个专栏收录

121 篇文章 14 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

`获取当前年月点击按钮切换年月`

在这里插入图片描述

    <div>{{ currentYear }}年{{ currentMonth }}月</div>
        <button @click="prevMonth">上个月</button>
        <button @click="nextMonth">下个月</button>
        <button @click="prevYear">上一年</button>
        <button @click="nextYear">下一年</button>
      </div>

<script>
export default {
  components: {},
  data() {
    return {
      currentYear: 0,
      currentMonth: 0,
    };
  },
  computed: {},
  mounted() {
    this.getCurrentDate();
  },
  methods: {
    // 获取当前年月
    getCurrentDate() {
      const currentDate = new Date();
      this.currentYear = currentDate.getFullYear();
      this.currentMonth = currentDate.getMonth() + 1;
    },
    // 上一月
    prevMonth() {
      if (this.currentMonth === 1) {
        this.currentMonth = 12;
        this.currentYear--;
      } else {
        this.currentMonth--;
      }
    },
    // 下一月
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentMonth = 1;
        this.currentYear++;
      } else {
        this.currentMonth++;
      }
    },
    // 上一年
    prevYear() {
      this.currentYear--;
    },
    // 下一年
    nextYear() {
      this.currentYear++;
    },
  },
};
</script>