vue使用中的問題,經驗

2021-10-23 19:26:00 字數 3994 閱讀 3227

vue開發中遇到的問題的記錄

@toc##在vue中按時間段(本週,本月,本季度,本年)查詢?

在src下的utils中建檔案datetimeutils.js,**如下

/**

* @created by xfl on 2019/6/10

*/exports.install = function (vue, options)

if (day >= 0 && day <= 9)

let tmp= year + '-' + month + '-' + day

return tmp

};/**

* 獲取月初,獲取 當前月+gap 的月初(若gap為-1,則獲取上月初,若gap為1,則獲取下月初,

* @param date 若date為空,則獲取當前月的

* @param gap

* @returns

*/vue.prototype.get_month_first = function (date,gap)

// 獲取間隔月

let gapmonth = date1.getmonth() + gap

// 獲取間隔月月初

let gapmonthfirstday=new date(date1.getfullyear(),gapmonth,1);

let firstday = this.format_date(gapmonthfirstday)

console.log(firstday)

return firstday

};// 獲取月末

vue.prototype.get_month_last = function (date,gap)

// 獲取下個月月初

let gapmonth = date1.getmonth()

gapmonth = gapmonth + 1 + gap

let nextmonthfirstday=new date(date1.getfullyear(),gapmonth,1)

nextmonthfirstday = nextmonthfirstday.gettime() - 1000*60*60*24

let temp = new date()

temp.settime(nextmonthfirstday)

let lastday = this.format_date(temp)

return lastday

};/**

* 獲取日期函式,

* @param datetime 若為空則返回當前日期

* @param gap 若gap=0,則為系統日期,若不為0,則當期日期-gap(當前日期減去gap這個數值的日期)

* @returns

*/vue.prototype.get_date = function (datetime,gap)

date = date.gettime() - 1000*60*60*24*gap

let temp = new date()

temp.settime(date)

let day = this.format_date(temp)

return day

};//獲取當前月份

vue.prototype.get_curmonth = function ()

// 時間戳轉時間

vue.prototype.timestamp_to_time = function (gap);

/*** 日期比較,1>=2,返回true

* @param time1

* @param time2

* @returns

*/vue.prototype.comparedatetime = function (time1,time2)

/*** 返回周的起始日期

* @param arg // 本週

* cxm

*/vue.prototype.getweekstartend = function (arg)

/*** 返回月的起始日期

* @param arg //1,0,-1 上月 本月 下個月

* cxm

*/vue.prototype.getmonthstartend = function (arg)

currentdate = new date(currentdate.setmonth(month));

let currentmonth = currentdate.getmonth();

let currentyear = currentdate.getfullyear();

let currentmonthfirstday = new date(currentyear, currentmonth, 1)

let currentmonthlastday = new date(currentyear, currentmonth+1, 0)

startend.push(this.format_date(currentmonthfirstday));

startend.push(this.format_date(currentmonthlastday));

return startend;

} /**

* 獲得本季度的起止日期

* */

vue.prototype.getseasonstartend = function () ;

/*** 返回年的起始日期

* @param arg //1,0,-1 去年 今年 明年

* cxm

*/vue.prototype.getyearstartend = function (arg) ,

vue.prototype.getseasonstartmonth= function (month)

if (month < 6)

if (month < 9)

return fourthseason;

};

vue.prototype.getseasonstartend = function () ;

};

在頁面index.vue中布局

查詢時段:

本週本月

本季度本年

自定義

在mounted()中,呼叫this.gettime();gettime()函式裡獲取時間段,如下:

gettime(),
切換時間段時value值發生變化,選擇對應時間

changestatisticaltime(val) else if(val == 'month')else if(val=='season')else if(val == 'year')  else if(val == 'definetime')

},

在api中找對應的頁面index.js檔案中,在頁面中根據query或者parmas方式定義方法,呼叫介面,如下:

import axios from '@/utils/request'  

// export const _queryenergyconsumptionreport = params =>

export const _queryenergyconsumptionreport = (params,obj)=>

export const _exportexcel =(obj,options) =>

}return axios.post('/ems/energycr/exportexcel' ,obj,options)

}

2.在index.vue中定義方法,呼叫index.js檔案中的介面方法,賦值,如下:

// 獲取列表

getenergyreportlist())

},

3.在需要的地方呼叫以上方法, getenergyreportlist()

vue中watch的使用問題

1 如果有change原生事件盡量用原生,不要用watch,畢竟watch只是封裝了一層,效能各方面不如原生方法。2 盡量不要watch陣列,如果非得監控陣列的變化,就設定乙個flag,陣列變flag變,watch對應的flag來處理。當前有兩個陣列 tempy label1 label2 labe...

Vue 使用中遇到的問題(一)

在使用vue過程中,如果語法使用不當,會在除錯區域 chrome 開發者平台中的console區域 出現提示錯誤,因具體情況不同提示有差異 vue.js 616 vue warn unknown custom element did you register the component correc...

經驗篇之vue中傳值以及賦值問題

作為vue非資深的學習者,在工作中使用vue的時候還是遇見的很多所謂的坑,打算總結一下 就在昨天pm找到我,給我看了乙個bug,很是頭疼的是,我看了半天 就是看不出有什麼問題,但是實現起來就是報錯。先看一下場景 這是詳情頁的tab欄,這裡的大概邏輯就是從別的頁面跳轉到詳情頁並且需要選中虛擬伺服器組這...