vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
前言
在vue中,從后臺(tái)獲取數(shù)據(jù),如果不是sql語句(類似:select convert(char(10),GetDate(),120) as Date)獲取的數(shù)據(jù),在前臺(tái)就會(huì)出現(xiàn)如下情況:
解決方法:
1. 使用自定義函數(shù)格式化時(shí)間數(shù)據(jù):
(1)年月日:
var timearr = time.replace(" ", ":").replace(/\:/g, "-").split("-"); var timestr = timearr[0]+"年"+ Number(timearr[1])+ "月" + timearr[2]+"日";
(2)時(shí)分
var timearr = time.replace(" ", ":").replace(/\:/g, "-").split("-"); var timestr = ""+timearr[3]+ " :" + timearr[4]+" ";
完整時(shí)間截取的方法:
getPartTime(val){ // let ti = val.split(' '); var timearr = val.replace(" ", ":").replace(/:/g, "-").split("-"); var timestr = ""+ Number(timearr[1])+ "月" + timearr[2]+"日"; // console.log(4444,val) return timestr; },
數(shù)據(jù)調(diào)用:
<detail-list-item term="樓棟名稱">{{ item.buildingName }}</detail-list-item> <detail-list-item term="樓棟編號(hào)">{{ item.buildingNo }}</detail-list-item> <detail-list-item term="樓棟位置">{{ item.buildingAddress }}</detail-list-item> <detail-list-item term="樓棟總面積">{{ item.buildingArea }}</detail-list-item> <detail-list-item term="GPS經(jīng)度">{{ item.longitude }}</detail-list-item> <detail-list-item term="GPS緯度">{{ item.latitude }}</detail-list-item> <detail-list-item term="樓棟總層數(shù)">{{ item.floorCnt }}</detail-list-item> <detail-list-item term="包含公司數(shù)">{{ item.companyNumb }}</detail-list-item> <detail-list-item term="樓棟管家">{{ item.buildingSteward }}</detail-list-item> <detail-list-item term="建造時(shí)間">{{ getPartTime(item.buildingTime) }}</detail-list-item>
格式化后數(shù)據(jù):
自定義函數(shù)方法的好處是任何地方都可以調(diào)用這個(gè)函數(shù)進(jìn)行數(shù)據(jù)格式化。
2. 利用substring函數(shù)截?。?/h3>
可以先使用console.log打印數(shù)據(jù)顯示數(shù)據(jù)是否符合要求:
console.log(this.buildings[0].buildingTime.substring(0, 10))
完整截取代碼如下:
GetEnterpriseData(1).then(response => { this.enterprisedata = response.result this.buildings = this.enterprisedata[0].buildings // console.log(this.buildings[0].buildingTime.substring(0, 10)) for (let i = 0; i < 10; i += 1) { this.buildings[i].buildingTime = this.buildings[i].buildingTime.substring(0, 10) console.log(this.buildings[i].buildingTime) } // console.log('qqqq', this.enterprisedata) })
或者:
<detail-list-item term="樓棟管家">{{ item.buildingSteward }}</detail-list-item> <detail-list-item term="建造時(shí)間" >{{ item.buildingTime.substring(0, 10) }}</detail-list-item>
截取后控制臺(tái)打印數(shù)據(jù):
3. 利用left函數(shù)截取
LEFT(string,length)函數(shù)
從字符串string中,從第一個(gè)字符開始,自左向右,截取長度為length的子串。
舉個(gè)例子,string為 ‘ABCDEFG’,length為3,那么截取的子串就是’ABC’了。
4. 利用right函數(shù)截取
與上面函數(shù)類似,只是方向自右向左,例子同上,截取的子串就是’EFG’了。
總結(jié)
到此這篇關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的文章就介紹到這了,更多相關(guān)vue用js函數(shù)截取時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue+Java 通過websocket實(shí)現(xiàn)服務(wù)器與客戶端雙向通信操作
這篇文章主要介紹了Vue+Java 通過websocket實(shí)現(xiàn)服務(wù)器與客戶端雙向通信操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Vue3中按需引入ECharts詳細(xì)步驟(一看就會(huì))
新項(xiàng)目采用Vue3作為前端項(xiàng)目框架,避免不了要使用echarts,這篇文章主要給大家介紹了關(guān)于Vue3中按需引入ECharts的相關(guān)資料,需要的朋友可以參考下2023-09-09Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法
今天小編就為大家分享一篇Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例
這篇文章主要介紹了Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下2020-11-11Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析,主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達(dá)數(shù)據(jù)的動(dòng)態(tài)響應(yīng),有興趣的可以了解一下2017-07-07