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.VeVB.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，可得到如下测试运行效果：