Vue获取本年、本月、今日，年初-年末、月初-月末

注意：项目Select 选择器基于 Element
html:

<template>
  <div class="mybody">
    <div class="top_fa">
      <el-select v-model="top_value" placeholder="请选择时间">
        <el-option v-for="item in top_options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

JavaScript：

      getNowTime() {
        var now = new Date();
        var year = now.getFullYear(); //得到年份
        var month = now.getMonth(); //得到月份
        var day = now.getDate(); //得到天
        if (day < 10) {
          day = "0" + day
        }
        month = month + 1;
        month = month.toString().padStart(2, "0");
        /**
         * 获取月初到月末，年初到年末
         * **/
        this.today.date_from = `${year}-${month}-${day}`
        this.today.date_to = `${year}-${month}-${day}`
        this.month.date_from = `${year}-${month}-01`
        this.month.date_to = `${year}-${month}-31`
        this.year.date_from = `${year}-01-01`
        this.year.date_to = `${year}-12-31`
      },

完整示例：
请求时间段数据

<template>
  <div class="mybody">
    <div class="top_fa">
      <el-select v-model="top_value" placeholder="请选择时间">
        <el-option v-for="item in top_options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isCollapse: false,
        // 统计的时间选择值
        top_value: 4,
        top_options: [{
            label: "今日",
            value: 1
          },
          {
            label: "本月",
            value: 2
          },
          {
            label: "本年",
            value: 3
          },
          {
            label: "全部",
            value: 4
          },
        ],
        today: {
          date_from: '',
          date_to: ''
        },
        month: {
          date_from: '',
          date_to: ''
        },
        year: {
          date_from: '',
          date_to: ''
        },
        date: {
          date_from: '',
          date_to: ''
        },
      }
    },
    components: {},
    mounted() {
      this.getNowTime()

    },
    methods: {
      /**
       * @description 获取时间**/
      getNowTime() {
        var now = new Date();
        var year = now.getFullYear(); //得到年份
        var month = now.getMonth(); //得到月份
        var day = now.getDate(); //得到天
        if (day < 10) {
          day = "0" + day
        }
        month = month + 1;
        month = month.toString().padStart(2, "0");
        /**
         * 获取月初到月末，年初到年末
         * **/
        this.today.date_from = `${year}-${month}-${day}`
        this.today.date_to = `${year}-${month}-${day}`
        this.month.date_from = `${year}-${month}-01`
        this.month.date_to = `${year}-${month}-31`
        this.year.date_from = `${year}-01-01`
        this.year.date_to = `${year}-12-31`

        // 对象不要直接赋值，其中涉及深浅拷贝原理
        switch (this.top_value) {
          case 1:
            this.date = JSON.parse(JSON.stringify(this.today));
            break;
          case 2:
            this.date = JSON.parse(JSON.stringify(this.month));
            break;
          case 3:
            this.date = JSON.parse(JSON.stringify(this.year));
            break;
          case 4:
            this.date.date_from = null;
            this.date.date_to = null
            break;

          default:
            break;
        }
        this.panel()
      },
      // 所有信息
      panel() {
        let params = {
          date_from: this.date.date_from,
          date_to: this.date.date_to
        }
        this.$axios.get(`${this.$Tools.Conts.domain}statistics/panel-new`, {
          params
        }).then(res => {
          if (res.data.code == 0) {
            this.detailObj = res.data.data
          }
        }).catch((err) => {
          this.$Tools.Alert.permissionError({
            data: err,
            popup: true
          })
        })
      },



    },
    watch: {
      /**
       * @description 自动化filter数据变化
       */
      //延时处理
      "top_value": {
        handler() {
          // 对象不要直接赋值，其中涉及深浅拷贝原理
          switch (this.top_value) {
            case 1:
              this.date = JSON.parse(JSON.stringify(this.today));
              break;
            case 2:
              this.date = JSON.parse(JSON.stringify(this.month));
              break;
            case 3:
              this.date = JSON.parse(JSON.stringify(this.year));
              break;
            case 4:
              this.date.date_from = null;
              this.date.date_to = null
              break;

            default:
              break;
          }
          this.panel()
        }
      }
    }
  }
</script>