Vue页面实现时间动态更新

页面实现时间动态更新"/>

Vue页面实现时间动态更新

1、data

data() {return {myDateTime: ""}
}

2、mouted

  mounted() {this.getCurrentTime();clearInterval(myTimeDisplay );let myTimeDisplay = setInterval(() => {this.getCurrentTime(); //每秒更新一次时间}, 1000);},

3、methods

 methods: {getCurrentTime() {let self = this//获取当前时间var date = new Date();var year = date.getFullYear(); //当前年份var month = date.getMonth(); //当前月份var data = date.getDate(); //天var hours = date.getHours(); //小时var minute = date.getMinutes(); //分var second = date.getSeconds(); //秒var time =year +"-" +(month + 1) +"-" +data +"      " +hours +":" +minute +":" +second;self.dateTime = time;},
}

4、最后在需要显示时间的地方加上下面一行即可

<span class="list">{{myDateTime}}</span>