vue实时显示日期时间星期几

描述：页面实时展示年月日时分秒和星期几

<template><div class="header"><div>{{ date }} {{ week }}</div><div>{{ time }}</div></div>
</template>
<script>
export default {name: "home",data() {return {timer: null,time: "",date: "",week: "",};},mounted() {this.dateFormat();this.timer = setInterval(() => {this.dateFormat();}, 1000);},beforeDestroy() {this.dataDestroy();},methods: {dataDestroy() {if (this.timer) {clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器}},dateShow() {},dateFormat() {let date = new Date();let year = date.getFullYear();let month =date.getMonth() + 1 < 10? "0" + (date.getMonth() + 1): date.getMonth() + 1;let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();let hours =date.getHours() < 10 ? "0" + date.getHours() : date.getHours();let minutes =date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();let seconds =date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();this.date = year + "-" + month + "-" + day + " ";this.time = hours + ":" + minutes + ":" + seconds;this.week = "星期" + "日一二三四五六".charAt(date.getDay());},},
};
</script>
<style lang="scss" scoped>
.header {height: 85%;padding: 0 20px;font-size: 16px;color: #fff;
}
</style>

vue实时显示日期时间星期几相关推荐

JavaScript实时显示日期时间
网页里实时显示当前时间 <html><head><title>显示系统日期时间</title><script language="Jav ...
【数据库】Mysql函数DATE_FORMAT() 显示日期/时间
上一篇文章介绍了Mysql函数DATE_ADD(),这篇文章主要是为了解决上次遗留的问题: 把问题变得更复杂一点:假设有两个借款,其中一个借款1的到期还款日为2日,借款2的到期还款日为10日.这个字段 ...
实时显示当前时间（中文版）
前言:实时显示当前时间(中文版),一周的第几天用中文显示效果: <!DOCTYPE html> <html lang="zh"><head>& ...
实时显示当前时间，每秒更新
实时显示当前时间,每秒更新我们可以利用定时器来完成这个功能 HTML <div id="app">{{date}} </div> JS <scrip ...
使用js实时显示北京时间
今天由于项目需要,需要在网站首页显示实时的北京时间, 在网上扒了一会儿,感觉没看明白怎么回事儿,最后还是从别的网站上copy来的,所以这次不是原创啊.哈哈 1.首页引入jquery.min.js 2. ...
DateEdit如果开启Vista模式并显示日期+时间模式
DateEdit如果开启Vista模式并显示日期+时间模式问题,以前没有涉及过,借机看一下,记录如下: 设置为Vista显示模式(如下图) 设置以下属性 dateEdit1.Properties.V ...
【响应式Web前端设计】在html页面实时显示系统时间
在html页面实时显示系统时间桌面新建记事本,将下列代码复制粘贴,重命名后缀为.html,保存,用浏览器打开即可 <html> <head><meta http-equ ...
LaTeX去掉默认显示日期时间
LaTeX默认情况下会显示日期时间,该时间是编译时的日期,有时候我们并不需要显示该日期,该怎么办呢? 方法: 使用\date关键字并将{}里的内容置空即可,即: \date{} 重新编译,这样就不显示 ...
html显示日期时间代码,JS全中文显示日期时间代码
JS全中文显示日期时间代码_网页代码站(www.webdm.cn) function number(index1){ var numberstring="一二三四五六七八九十"; ...

vue实时显示日期时间星期几

vue实时显示日期时间星期几相关推荐

最新文章

热门文章