vue实现当前时间动态显示
如图所示:1.直接返回定义的时间<template><!-- 注意: link 不能使用,因为它是内置的标签你要使用另外一个名称就行了,一般加上一个前缀--><div><el-button ><span>{{newDate}}</span></el-button></div></t
·
如图所示:
1.直接返回定义的时间
<template>
<!-- 注意: link 不能使用,因为它是内置的标签
你要使用另外一个名称就行了,一般加上一个前缀
-->
<div>
<el-button >
<span>{{newDate}}</span>
</el-button>
</div>
</template>
2.然后就是需要挂载时间
注:这里是vue的生命周期,生命周期函数图示链接为 https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
created( ) 与 mounted( )的区别就是:
created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
mounted在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
data() {
retrun{
// 当前时间
newDate: new Date()
}
},
// 挂载时间
mounted () {
let that = this
this.timer = setInterval(function () {
that.newDate = new Date().toLocaleString()
})
},
// 销毁时清除计时器
beforeDestroy: function () {
if (this.timer) {
clearInterval(this.timer)
}
},
this.timer即为定时器
做到这里时间就可以显示了
如图:
3.我们可以对时间进行格式化:
按钮改为需要调用格式的方法即可
<el-button >
<span>{{dateFormat(newDate)}}</span>
</el-button>
对时间进行格式处理
methods: {
// 时间格式化
dateFormat () {
var date = new Date()
var year = date.getFullYear()
/*
* 在日期格式中,月份是从0开始的
* 使用三元表达式在小于10的前面加0,以达到格式统一 如 09:11:05
* /
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
let week = date.getDay() // 星期
let weekArr = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
// 拼接 时间格式处理
return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
}
}
效果如图所示:
更多推荐
已为社区贡献1条内容
所有评论(0)