快捷導(dǎo)航

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

更新時間：2018年07月07日 12:25:55 作者：_code小學(xué)生

這篇文章主要介紹了vue.js實現(xiàn)格式化時間并每秒更新顯示功能,結(jié)合實例形式分析了vue.js時間格式化顯示與基于定時器進行實時更新的相關(guān)操作技巧,需要的朋友可以參考下

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

<!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.fzitv.net 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支持在{{ }}插值的尾部添加一個管道符“(|)”對數(shù)據(jù)進行過濾，經(jīng)常用于格式化文本，比如字母全部大寫，貨幣千位使用逗號分隔等。過濾的規(guī)則是自定義的，通過給vue實例添加選項filters來設(shè)置，例如對顯示時間的格式化處理 #-->
  {{ 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;
      }
    },
    //實例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測等，但尚未掛載，$el 還不可用。需要初始化處理一些數(shù)據(jù)時會比較有用
    created:function () {
     },
    //el掛載到實例上后調(diào)用，一般我們的第一個業(yè)務(wù)邏輯會在這里開始
    mounted:function () {
      var _this = this; //聲明一個變量指向Vue實例this，保證作用域一致
      this.timer = setInterval(function(){
        _this.date = new Date(); //修改數(shù)據(jù)date
      },1000)
    },
    //實例銷毀之前調(diào)用。主要解綁一些使用addEventListener監(jiān)聽的事件等
    beforeDestroy:function(){
      if(this.timer){
        clearInterval(this.timer); //在Vue實例銷毀前，清除我們的定時器
      }
    }
  })
</script>

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