首页用vue框架写一个时钟页面

用vue框架写一个时钟页面

时间: 2023-11-18 15:10:02 浏览: 86

以下是一个简单的Vue时钟页面，包含当前时间的显示和实时更新功能。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue时钟页面</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f2f2f2; } h1 { font-size: 3em; margin-top: 50px; } p { font-size: 2em; margin-top: 20px; } </style> </head> <body> <div id="app"> <h1>{{ time }}</h1> <p>{{ date }}</p> </div> <script> new Vue({ el: '#app', data: { time: '', date: '' }, mounted() { setInterval(() => { this.time = new Date().toLocaleTimeString(); this.date = new Date().toLocaleDateString(); }, 1000); } }); </script> </body> </html> ``` 在这个页面中，我们使用了Vue的模板语法来显示当前时间和日期，使用了Vue的数据绑定功能来实时更新页面。在Vue实例的mounted生命周期钩子函数中，我们使用了setInterval函数来每隔1秒更新一次时间和日期。

阅读全文