vue中格式化時間過濾器代碼實例
更新時間：2019年04月17日 11:27:44 作者：Lofty_ambition
這篇文章主要介紹了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)站的支持！
相關文章
這篇文章主要介紹了vue綁定class的三種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Element中的Cascader（級聯(lián)列表）動態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法
這篇文章主要介紹了Element中的Cascader（級聯(lián)列表）動態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-05-05 
這篇文章主要介紹了Vue前端判斷數(shù)據(jù)對象是否為空的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09 
這篇文章主要介紹了vue自定義日期組件的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-11-11 
這篇文章主要給大家介紹了如何從零開始實現(xiàn)Vue簡單的Toast插件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-12-12 
這篇文章主要給大家介紹了關于vue中實現(xiàn)div可編輯并插入指定元素與樣式的相關資料,文中通過代碼以及圖文將實現(xiàn)的方法介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下
2023-09-09 
vue中如何實現(xiàn)后臺管理系統(tǒng)的權限控制的方法步驟
這篇文章主要介紹了vue中如何實現(xiàn)后臺管理系統(tǒng)的權限控制的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09 
Vue.js響應式數(shù)據(jù)的簡單實現(xiàn)方法(一看就會)
Vue最巧妙的特性之一是其響應式系統(tǒng),下面這篇文章主要給大家介紹了關于Vue.js響應式數(shù)據(jù)的簡單實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-03-03