JS——显示当前时间

最新推荐文章于 2024-06-08 09:44:34 发布

原创最新推荐文章于 2024-06-08 09:44:34 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的实时日期显示应用。通过自定义过滤器和定时更新数据，页面上的日期时间会每秒自动刷新，展示当前的年、月、日、时、分、秒。此示例展示了Vue的数据绑定、组件生命周期以及时间处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{date | formatDate}}
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var padDate = function(value) {
				return value < 10 ? '0' + value : value;
			}
			var app = new Vue({
				el:'#app',
				data:{
					date: new Date()
				},
				filters: {
					formatDate: function(value) {
						var date = new Date(value);
						var year = date.getFullYear();
						var month = padDate(date.getMonth() + 1);
						var day = padDate(date.getDate());
						var hours = padDate(date.getHours());
						var minutes = padDate(date.getMinutes());
						var seconds = padDate(date.getSeconds());
						return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
					}
				},
				mounted:function(){
					var _this = this;
					this.timer = setInterval(function() {
						_this.date = new Date();
					}, 1000);
				},
				beforeDestroy:function(){
					if(this.timer) {
						clearInterval(this.timer);
					}
				}
			})
		</script>
	</body>
</html>