vue.js实现格式化时间并每秒更新显示功能示例
2018-10-15 17:29
阅读：537
本文实例讲述了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>格式化时间</title> <!-- Vue.js --> <script src=支持在{{ }}插值的尾部添加一个管道符“()”对数据进行过滤，经常用于格式化文本，比如字母全部大写，货币千位使用逗号分隔等。过滤的规则是自定义的，通过给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在线运行测试工具：，可得到如下测试运行效果：
PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：
在线日期/天数计算器：
在线日期计算器/相差天数计算器：
在线日期天数差计算器：
Unix时间戳(timestamp)转换工具：
希望本文所述对大家vue.js程序设计有所帮助。
评论
亲，登录后才可以留言！