基于vue实现时间的实时显示

最新推荐文章于 2023-11-27 15:39:18 发布

星光宇辰

最新推荐文章于 2023-11-27 15:39:18 发布

阅读量2.9k

点赞数 5

本文链接：https://blog.csdn.net/NXBBC/article/details/122897612

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实时实现显示</title>
	</head>
	<body>
		<div id="app">
			<span>当前时间：{{time|parsetime}}</span>    
		</div>
		<script src="js/v2.6.10/vue.js"></script>
		<script>
			//function getTime(){}
			var getTime = function() {
				var weeks = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var week = date.getDay();
				var hour = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				return year + '年' + month + '月' + day + '日' + '  ' + weeks[week] + '  ' + hour + ":" + minutes + ":" +
					seconds;
			};
			let app = new Vue({
				el: '#app', //挂载
				data: {
					time: ''
				},
				filters: {
					parsetime: getTime
				},
				methods: {
					refreshTime() {
						var updataTime = getTime();
						this.time = updataTime;
					}
				},
				mounted() {
					this.timer = setInterval(this.refreshTime, 1000);
					console.log(getTime());
				},
				beforeDestroy() {
					clearInterval(this.timer);
				}
			});
		</script>
	</body>
</html>

注意调用的时间函数的返回值和实际值的区别，才能得到正确的显示结果！！！