VUE中设置当前日期为默认日期、如何设置“最近30天”日期区间

当我们使用vue框架进行前端开发时，常见的需求包括，查询和列表展示。
设想这样一个使用场景：我们需要根据日期区间去查询数据，而当我们进入一个页面时，这个页面已经有默认的检索条件，我们的任务是——设置时间检索条件为最近30天。
这里我将我的做法分享给大家：

1. HTML结构中使用v-model绑定。

<el-date-picker v-model="beginTime" type="date" placeholder="请选择开始日期" value-format="yyyy-MM-dd" ></el-date-picker>
<el-date-picker v-model="endTime" type="date" placeholder="请选择结束日期" value-format="yyyy-MM-dd" ></el-date-picker>

2. 逻辑部分和数据绑定部分。
   **思路：**①使用Date对象获取当前时间，使用Date对象方法分别获取年/月/日，并进行拼接展示。此时可以得到指定格式的当前日期。②用setDate方法，设置30天前的日期。③判断30天前月份是否是个位数，是则补零。

data() {
    let nowDate = new Date();
    let date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      date: nowDate.getDate(),
    };
	// 当前日期
    let systemDate = date.year + "-" + date.month + "-" + date.date;
    
    var beforedate = new Date(nowDate);
    beforedate.setDate(nowDate.getDate() - 30);
    // 30天前
    let systemDateBegin = `${beforedate.getFullYear()}-${beforedate.getMonth() + 1<10?`0${beforedate.getMonth() + 1}`:beforedate.getMonth() + 1}-${beforedate.getDate()}`;
    return {
      beginTime: systemDateBegin,
      endTime: systemDate
      }
}

3. 最终页面的展示效果。
   
   以上是作者采用的方法，如有不足之处，欢迎交流~~