vue.js實現格式化時間并每秒更新顯示功能示例

2019-11-19 13:32:05

字體：大中小

來源：轉載

供稿：網友

本文實例講述了vue.js實現格式化時間并每秒更新顯示功能。分享給大家供大家參考，具體如下：

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport"     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>www.survivalescaperooms.com vue格式化時間</title>  <!-- Vue.js -->  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script></head><body><div id="app">  <!--# vue.js支持在{{ }}插值的尾部添加一個管道符“(|)”對數據進行過濾，經常用于格式化文本，比如字母全部大寫，貨幣千位使用逗號分隔等。過濾的規則是自定義的，通過給vue實例添加選項filters來設置，例如對顯示時間的格式化處理 #-->  {{ date | formatDate }}</div></body></html><script>  var myData = {    date:new Date()  };  //在月份、日期、小時等小于10前面補0  var padDate = function (value) {    return value <10 ? '0' + value:value;  };  var app = new Vue({    el:'#app',    data:myData,    filters: {      formatDate:function (value) {        var date = new Date(value);        var year = date.getFullYear();        var month = padDate(date.getMonth()+1);        var day = padDate(date.getDate());        var hours = padDate(date.getHours());        var minutes = padDate(date.getMinutes());        var seconds = padDate(date.getSeconds());        return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds;      }    },    //實例創建完成后調用，此階段完成了數據的觀測等，但尚未掛載，$el 還不可用。需要初始化處理一些數據時會比較有用    created:function () {     },    //el掛載到實例上后調用，一般我們的第一個業務邏輯會在這里開始    mounted:function () {      var _this = this; //聲明一個變量指向Vue實例this，保證作用域一致      this.timer = setInterval(function(){        _this.date = new Date(); //修改數據date      },1000)    },    //實例銷毀之前調用。主要解綁一些使用addEventListener監聽的事件等    beforeDestroy:function(){      if(this.timer){        clearInterval(this.timer); //在Vue實例銷毀前，清除我們的定時器      }    }  })</script>

使用本站HTML/CSS/JS在線運行測試工具：http://tools.VeVB.COm/code/HtmlJsRun，可得到如下測試運行效果：