vue.js实现格式化时间并每秒更新显示功能示例
2018-07-07 12:25
1346 查看
本文实例讲述了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.jb51.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支持在{{ }}插值的尾部添加一个管道符“(|)”对数据进行过滤,经常用于格式化文本,比如字母全部大写,货币千位使用逗号分隔等。过滤的规则是自定义的,通过给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.jb51.net/code/HtmlJsRun,可得到如下测试运行效果:
PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用:
在线日期/天数计算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在线日期计算器/相差天数计算器:
http://tools.jb51.net/jisuanqi/datecalc
在线日期天数差计算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix时间戳(timestamp)转换工具:
http://tools.jb51.net/code/unixtime
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- vue.js格式化时间并每秒更新
- vue.js使用v-if实现显示与隐藏功能示例
- vue.js使用v-model指令实现的数据双向绑定功能示例
- 使用js实现显示系统当前时间并实现倒计时功能并触发模态框(遮罩)功能
- vue 2.1.3 实时显示当前时间,每秒更新的方法
- JS小功能(setInterval实现图片效果显示时间)实例代码
- vue实现的上传图片到数据库并显示到页面功能示例
- vue2.0使用Sortable.js实现的拖拽功能示例
- vue.js实现带日期星期的数字时钟功能示例
- JS实现HTML页面中动态显示当前时间完整示例
- 点滴积累【JS】---JS小功能(setInterval实现图片效果显示时间)
- JS实现静态页面搜索并高亮显示功能完整示例
- vue.js 使用axios实现下载功能的示例
- JS实现密码框的显示密码和隐藏密码功能示例
- JS实现针对给定时间的倒计时功能示例
- Vue.js实现的计算器功能完整示例
- JS实现的数字格式化功能示例
- vue.js实现的经典计算器/科学计算器功能示例
- vue.js项目 el-input 组件 监听回车键实现搜索功能示例
- JS小功能(setInterval实现图片效果显示时间)实例代码