基于vue实现时间的实时显示
初学vue.js,时间显示
·
<!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>
注意调用的时间函数的返回值和实际值的区别,才能得到正确的显示结果!!!
更多推荐
已为社区贡献1条内容
所有评论(0)