Vue filter 過濾當(dāng)前時間實現(xiàn)實時更新效果

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

過濾器

過濾器是處于客戶端與服務(wù)器資源文件之間的一道過濾網(wǎng)，在訪問資源文件之前，通過一系列的過濾器對請求進行修改、判斷等，把不符合規(guī)則的請求在中途攔截或修改。也可以對響應(yīng)進行過濾，攔截或修改響應(yīng)。

下面通過代碼給大家介紹Vue filter 過濾當(dāng)前時間實現(xiàn)實時更新，具體代碼如下所示：

<!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="/a1/uploads/allimg/200110/144001F20-0.jpg"></script>
</head>
<body>
  <div id="ssl">
    {{currentTime|filterTime}}
  </div>
</body>
<script>
  var em = new Vue({
    el: "#ssl",
    data: {
      currentTime: new Date(), // 獲取當(dāng)前時間
    },
    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 + "秒"
      }
    },
    //聲明周期函數(shù) 是最早使用data數(shù)據(jù)的函數(shù)
    created() {
      var _this = this; //聲明一個變量指向Vue實例this，保證作用域一致
      setInterval(function () {
        _this.currentTime = new Date()//修改數(shù)據(jù)讓他可以實時更新
      }, 1000);
    }
  })
</script>
</html>

這里使用了created生命周期函數(shù) created是最早操作date數(shù)據(jù)的

代碼邏輯：先讓當(dāng)前時間可以實時更新在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))

//實現(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>

總結(jié)

以上所述是小編給大家介紹的Vue filter 過濾當(dāng)前時間實現(xiàn)實時更新，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對我們網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

上一篇：d3.js實現(xiàn)圖形拖拽

欄目：JavaScript

下一篇：JavaScript實現(xiàn)簡單計算器功能

本文標(biāo)題：Vue filter 過濾當(dāng)前時間實現(xiàn)實時更新效果

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9453.html

更多JavaScript