Vue中filter過濾當(dāng)前時(shí)間實(shí)現(xiàn)實(shí)時(shí)更新效果的示例-創(chuàng)新互聯(lián)

這篇文章主要介紹Vue中filter過濾當(dāng)前時(shí)間實(shí)現(xiàn)實(shí)時(shí)更新效果的示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都服務(wù)器托管，創(chuàng)新互聯(lián)建站提供包括服務(wù)器租用、重慶服務(wù)器托管、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、域名注冊(cè)等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：18982081108

過濾器

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

下面通過代碼給大家介紹Vue filter 過濾當(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í)間過濾器

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

<!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中的過濾器功能 先定義過濾器 在使用    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的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

以上是“Vue中filter過濾當(dāng)前時(shí)間實(shí)現(xiàn)實(shí)時(shí)更新效果的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：Vue中filter過濾當(dāng)前時(shí)間實(shí)現(xiàn)實(shí)時(shí)更新效果的示例-創(chuàng)新互聯(lián)
文章位置：http://muchs.cn/article8/dpicip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站營銷、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容