在 Vue 中可以使用 JavaScript 中的 Date 对象来获取当前时间,然后使用 Vue 中的数据绑定将时间显示在页面上。
html
<template>
<div>
<p>当前时间:{{ time }}</p>
</div>
</template>
<script>
export default {
data() {
return {
time: ''
}
},
mounted() {
this.getTime()
},
methods: {
getTime() {
const date = new Date()
const hours = date.getHours()
const minutes = date.getMinutes()
const seconds = date.getSeconds()
this.time = `${hours}:${minutes}:${seconds}`
setInterval(() => {
const date = new Date()
const hours = date.getHours()
const minutes = date.getMinutes()
const seconds = date.getSeconds()
this.time = `${hours}:${minutes}:${seconds}`
}, 1000)
}
}
}
</script>
在上面的示例中,mounted 钩子函数会在组件挂载后立即执行 this.getTime() 方法来获取时间。getTime() 方法使用 setInterval 来定时获取时间,并将时间格式化成时分秒的形式,然后将其赋值给 this.time 变量。在模板中使用数据绑定来显示时间。