在 Vue 中可以使用 JavaScript 中的 Date 对象来获取当前时间,然后使用 Vue 中的数据绑定将时间显示在页面上。
<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 变量。在模板中使用数据绑定来显示时间。