zoukankan      html  css  js  c++  java
  • vue根据选择的月份动态展示当前月份的每一天并展示每一天所对应的星期几

    <template>
      <div>
        <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="选择月" />
        <p>
          当月的每一天:
          <span v-for="item in everyDay" :key="item" style="margin-right:10px;">{{item}}</span>
        </p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          month: "",
          everyDay: []
        };
      },
      mounted(){
        let date = new Date(), month = date.getMonth();
        this.getEveryDay(date, month);
      },
      methods: {
        monthChange(date) {
          this.getEveryDay(date, date.getMonth());
        },
        getEveryDay(date, month) {
          //设置月份
          date.setMonth(month + 1);
          //设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天(比如,二月份就是28或29,其他月份就是30或31),方便下边的循环
          date.setDate(0);
          let dayArry = [];
          //获取月份的某一天
          let day = date.getDate();
    
          for (let i = 1; i <= day; i++) {
            date.setDate(i);   //如果只获取当前选择月份的每一天,则不需要date.setDate(i)只需dayArry.push(i)即可,其中date.setDate(i)是设置当前月份的每一天
            dayArry.push(i + ' ' + this.getWeekday(date.getDay()));   //选中月份的每一天和当天是星期几
          }
    
          this.everyDay = dayArry;
        },
        getWeekday(day){
          return ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][day];
        },
      }
    };
    </script>
    

    展示效果如下:

  • 相关阅读:
    python-pytest学习(四)-fixture简介
    python-pytest学习(三)-setup/teardown
    python-pytest学习(二)-执行用例规则
    Vue 之五 生命周期钩子函数 自定义指令 过滤器
    Vue 之四 Swiper
    Vue 之三局部组件与全局组件
    Vue 之三 与后端交互
    有关于mysql面试的小故事
    Vue 基础之二
    kubernetes
  • 原文地址:https://www.cnblogs.com/HelloLc/p/14865378.html
Copyright © 2011-2022 走看看