JavaScript

超轻量级php框架startmvc

vue.js实现格式化时间并每秒更新显示功能示例

更新时间:2020-07-15 14:54:01 作者:startmvc
本文实例讲述了vue.js实现格式化时间并每秒更新显示功能。分享给大家供大家参考,具体如

本文实例讲述了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程序设计有所帮助。