本文实例讲述了vue.js实现带日期星期的数字时钟功能。分享给大家供大家参考，具体如下：

！doctype html html ownerta charset=' utf-8 '标题www。jb51。净vue。射流研究…带日期星期数字时钟/titlestyle type='text/css'html，body { height : 100%；}车身{ background : # 0f 3854 background :-web套件-径向-渐变(中心椭圆，#0a2e38 0%，# 000000 70%)；背景：径向渐变（中心椭圆，#0a2e38 0%，# 000000 70%)；背景尺寸： 100%;} p { margin : 0；padd : 0；} # clock { font-family : ' Microsoft YaHei '，' Lantinghei SC '，' Open Sans '，Arial，' Hiragino Sans GB '，' THeiti '，' WenQuanYi Micro Hei '，' SimSun '，Sans-serif；color: # ffffff文本对齐：中心；绝对位置：左侧： 50%;前：名50%；-web kit-transform : translate(-50%，-50%)；transform: translate(-50%，-50%)；color : # daf6 fftext-shadow : 0 20px # 0 aafe 6，0 0 20px rgba(10，175，230，0)；} #时钟时间{字母间距：0.05 em；font-size : 80pxpadd : 5px 0；} #时钟。日期{字母间距： 0.1 emfont-size : 24px} #时钟。文本{字母间距： 0.1 emfont-size : 12pxpadd : 20px 0 0 }/style/head dyscript src=' http :https://cdn。bootscs。com/vue/2。4 .4/vue。量滴js/script div id=' clock ' p class=' date ' { date } }/p p class=' time ' { time } }/p p class=' text '数字时钟/p/div脚本类型=' text/JavaScript ' var clock=new Vue({ El : ' # clock '，data: { time: ' '，date : ' ' })；var week=['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var timerID=设置间隔(updateTime，1000)；updateTime()；函数updateTime(){ var CD=new Date()；时钟。时间=零填充(CD。gethours()，2)' : '零填充(CD。getminutes()，2)' : '零填充(CD。getseconds()，2)；时钟。日期=零填充(光盘。getfullyear()，4)'-'零填充(CD。getmonth()(1，2) '-' zeroPadding(cd.getDate()，2)' ' week[CD。getday()]；};函数零填充(数字，数字){ var zero=for(var I=0；我位数；I){ 0零=' 0 ';}返回（零个数)。切片(-数字);}/脚本/正文/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下运行效果：

PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用：

在线日期/天数计算器：http://工具。JB 51。net/jisuanqi/date _ jisuanqi

在线日期计算器/相差天数计算器：http://工具。JB 51。net/jis uan qi/日期计算

在线日期天数差计算器：http://工具。JB 51。net/jis uan qi/online datejsq

Unix操作系统操作系统时间戳（时间戳)转换工具：http://工具。JB 51。网络/代码/UNIX时间

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