快捷導(dǎo)航

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

更新時(shí)間：2019年12月20日 10:26:20 作者：Hello My girl.

這篇文章主要介紹了Vue filter 過(guò)濾當(dāng)前時(shí)間實(shí)現(xiàn)實(shí)時(shí)更新效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

過(guò)濾器

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

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

<!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(), // 獲取當(dāng)前時(shí)間
    },
    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 + "時(shí)" + MI + "分" + S + "秒"
      }
    },
    //聲明周期函數(shù) 是最早使用data數(shù)據(jù)的函數(shù)
    created() {
      var _this = this; //聲明一個(gè)變量指向Vue實(shí)例this，保證作用域一致
      setInterval(function () {
        _this.currentTime = new Date()//修改數(shù)據(jù)讓他可以實(shí)時(shí)更新
      }, 1000);
    }
  })
</script>
</html>

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

代碼邏輯：先讓當(dāng)前時(shí)間可以實(shí)時(shí)更新在created里面

然后在filters里面更改時(shí)間格式

ps：Vue 時(shí)間過(guò)濾器

Vue里的時(shí)間過(guò)濾器：

<!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>

元素的補(bǔ)零計(jì)算：

<script>
//元素的補(bǔ)零計(jì)算
function addZero(val){
 if(val < 10){
 return "0" +val;
 }else{
 return val;
 }
};

console.log(addZero(9))

//實(shí)現(xiàn)vue中的過(guò)濾器功能 先定義過(guò)濾器 在使用    value是過(guò)濾器前面的值，type是過(guò)濾器中定義的字段
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 過(guò)濾當(dāng)前時(shí)間實(shí)現(xiàn)實(shí)時(shí)更新，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: