vue中格式化時間過濾器代碼實例
本文實例為大家分享了vue格式化時間過濾器的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <div> {{ message | formatTime('YMD')}} </div> <div> {{ message | formatTime('YMDHMS')}} </div> <div> {{ message | formatTime('HMS')}} </div> <div> {{ message | formatTime('YM')}} </div> </div> <script> //元素的補零計算 function addZero(val){ if(val < 10){ return "0" +val; }else{ return val; } }; console.log(addZero(9)) //實現(xiàn)vue中的過濾器功能 先定義過濾器 在使用 value是過濾器前面的值,type是過濾器中定義的字段 Vue.filter("formatTime",function(value,type){ var dataTime=""; var data = new Date(); data.setTime(value); var year = data.getFullYear(); var month = addZero(data.getMonth() + 1); var day = addZero(data.getDate()); var hour = addZero(data.getHours()); var minute = addZero(data.getMinutes()); var second = addZero(data.getSeconds()); if(type == "YMD"){ dataTime = year + "-"+ month + "-" + day; }else if(type == "YMDHMS"){ dataTime = year + "-"+month + "-" + day + " " +hour+ ":"+minute+":" +second; }else if(type == "HMS"){ dataTime = hour+":" + minute+":" + second; }else if(type == "YM"){ dataTime = year + "-" + month; } return dataTime;//將格式化后的字符串輸出到前端顯示 }); var app = new Vue({ el: '#app', data: { message: '1501068985877' } }); </script> </body> </html>
以上所述是小編給大家介紹的vue格式化時間過濾器詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue生產(chǎn)和開發(fā)環(huán)境如何切換及過濾器的使用
本文主要介紹了Vue生產(chǎn)、開發(fā)環(huán)境如何切換及過濾器的使用,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08Element-ui DatePicker顯示周數(shù)的方法示例
這篇文章主要介紹了Element-ui DatePicker顯示周數(shù)的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-07-07純前端使用Vue3上傳文件到minio文件服務器(粘貼可直接用)
vue是目前最流行的前端框架,下面這篇文章主要給大家介紹了關(guān)于純前端使用Vue3上傳文件到minio文件服務器的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04vue2?element?實現(xiàn)表格點擊詳情返回時保留查詢參數(shù)的示例代碼
這篇文章主要介紹了vue2?element?實現(xiàn)表格點擊詳情返回時保留查詢參數(shù)的示例代碼,本文通過圖文示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03Vue el-table復選框全部勾選及勾選回顯功能實現(xiàn)
這篇文章主要介紹了Vue el-table復選框全部勾選及勾選回顯功能實現(xiàn),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05vue使用sass根據(jù)環(huán)境進行樣式判斷區(qū)分方式
這篇文章主要介紹了vue使用sass根據(jù)環(huán)境進行樣式判斷區(qū)分方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03Vue中使用定時器(setInterval、setTimeout)的兩種方式
js中定時器有兩種,一個是循環(huán)執(zhí)行?setInterval,另一個是定時執(zhí)行?setTimeout,這篇文章主要介紹了Vue中使用定時器?(setInterval、setTimeout)的兩種方式,需要的朋友可以參考下2023-03-03vue+vue-fullpage實現(xiàn)整屏滾動頁面的示例代碼(直播平臺源碼)
這篇文章主要介紹了vue+vue-fullpage實現(xiàn)整屏滾動頁面,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06