溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Vue中filter過濾當前時間實現實時更新效果的示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
過濾器
過濾器是處于客戶端與服務器資源文件之間的一道過濾網，在訪問資源文件之前，通過一系列的過濾器對請求進行修改、判斷等，把不符合規則的請求在中途攔截或修改。也可以對響應進行過濾，攔截或修改響應。
下面通過代碼給大家介紹Vue filter 過濾當前時間 實現實時更新，具體代碼如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> </head> <body> <div id="ssl"> {{currentTime|filterTime}} </div> </body> <script> var em = new Vue({ el: "#ssl", data: { currentTime: new Date(), // 獲取當前時間 }, filters: { filterTime(val) { var Y = val.getFullYear() var M = val.getMonth() var D = val.getDate() var H = val.getHours() var MI = val.getMinutes() var S = val.getSeconds() return Y + "年" + M + "月" + D + "日" + H + "時" + MI + "分" + S + "秒" } }, //聲明周期函數 是最早使用data數據的函數 created() { var _this = this; //聲明一個變量指向Vue實例this，保證作用域一致 setInterval(function () { _this.currentTime = new Date()//修改數據讓他可以實時更新 }, 1000); } }) </script> </html>
這里使用了created生命周期函數 created是最早操作date數據的
代碼邏輯：先讓當前時間可以實時更新 在created里面
然后在filters里面更改時間格式
ps：Vue 時間過濾器
Vue里的 時間過濾器：
<!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))
//實現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>Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
以上是“Vue中filter過濾當前時間實現實時更新效果的示例”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
