问题:
例如门户系统显示的当前时间,按秒刷新的方式显示。
解决方法:
Date类型转字符串类型
// Vue main.js
Date.prototype.format = function(fmt) {
var o = {
'M+': this.getMonth() + 1, // 月份
'd+': this.getDate(), // 日
'h+': this.getHours(), // 小时
'm+': this.getMinutes(), // 分
's+': this.getSeconds(), // 秒
'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
'S': this.getMilliseconds() // 毫秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt
}
调用方法:
var date = new Date()
var timeStr = date.format('yyyy-MM-dd hh:mm:ss')
如果Eslint检查出现Date prototype 不可用的情况,修改Eslint
// 禁止扩展native对象,除了Date,也可以添加Array
'no-extend-native': ["error", { "exceptions": ["Date"] }],
实时刷新
利用setInterval 和 clearInterval
在mounted(){}
中添加计时器方法,在beforeDestroy(){}
中清除计时器
created() {
this.formatDate()
},
mounted() {
const that = this
this.timer = setInterval(() => {
that.formatDate()
}, 1000)
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer) // 在Vue实例销毁前,清除我们的定时器
}
},
methods: {
formatDate() {
var date = new Date()
this.timeStr = date.format('yyyy-MM-dd hh:mm:ss')
}
}