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 ' titlewww.jb51.net vue格式time /title！-vue . js-script src=' http :https://cdn . bootscs.com/vue/2 . 5 . 16/vue . min . js '/script/headsdydiv id=' app '！- # vue.js支持在{}插值的末尾添加一个管道字符“(|)”来过滤数据，常用来格式化文本，比如所有字母都大写，上千种货币用逗号隔开。过滤规则是用户定义的，可以通过向vue实例添加选项过滤器来设置，例如，格式化显示时间#-{ { date | format date } }/div/body/html script var my data={ date : new date()}；//添加0 var paddate=function(value){返回值10？“0”值value:value};var app=new Vue({ el:'#app '，data:myData，filter s : { format Date : function(值){ var date=new Date(值)；var year=date . getfullyear()；var month=padd ate(date . getmonth)(1)；var day=padd ate(date . getdate())；var hours=padd ate(date . gethours())；var minutes=padd ate(date . getminutes())；var seconds=padd ate(date . getseconds())；返回年'-'月'-'日'-' ' '小时' : '分' : '秒；}}.//创建实例后调用。在这个阶段，数据观察已经完成，但是还没有安装，并且$el还不可用。初始化和处理一些数据是有用的。created:function () {}，//el在装入实例后调用。通常，我们的第一个业务逻辑将从这里开始。挂载的：函数(){ var _ this=this//声明一个变量指向Vue实例this，并确保作用域一致。这个。timer=set interval(function(){ _ this。date=new date()；//修改数据日期}，1000) }，//在实例销毁前调用。主要是解除addEventListener监控的一些事件的绑定，比如beforedestroy :函数(){if (this。计时器){clearinterval(这。计时器)；//在Vue实例被破坏之前清除我们的计时器} } })/脚本使用本网站的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时间戳转换工具：http://tools.jb51.net/code/unixtime

希望本文对vue.js程序的设计有所帮助。