技術標籤：vue專案vueelementuijavascript前端

當我們使用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. 最終頁面的展示效果。
   
   以上是作者採用的方法，如有不足之處，歡迎交流~~