vue实现-年、月、日、时、分、秒、星期?

一、文章引导

年月日时分秒星期 script template

二、博主简介

🌏博客首页: 春波petal
📑文章摘要:vue年月日时分秒-星期
💌春波寄语:++故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。++


三、文章内容

废话不多说,直接copy代码使用

1、template

html 复制代码
<div class="time">
	<p>{{ time.hour > 9 ? time.hour : "0" + time.hour }}:{{time.min > 9 ? time.min : "0" + time.min}}:{{ time.seconds > 9 ? time.seconds : "0" + time.seconds }}
	</p>
	<dl>
		<dd>{{ time.days }}</dd>
		<dt>{{ time.year }}-{{time.month > 9 ? time.month : "0" + time.month}}-{{ time.day > 9 ? time.day : "0" + time.day }}
		</dt>
	</dl>
</div>

2、script

js 复制代码
<script>
export default {
	data() {
		return {
			time: {
				year: '',
				month: '',
				day: '',
				hour: '',
				min: '',
				seconds: '',
				days: '',
			}
		}
	},
	 methods: {
	    getCurrentDate() {
	      var myDate = new Date();
	      var year = myDate.getFullYear(); //年
	      var month = myDate.getMonth() + 1; //月
	      var day = myDate.getDate(); //日
	      var hour = myDate.getHours(); //时
	      var min = myDate.getMinutes(); //分
	      var seconds = myDate.getSeconds(); //秒
	      var days = myDate.getDay();
	      switch (days) {
	        case 1:
	          days = '星期一';
	          break;
	        case 2:
	          days = '星期二';
	          break;
	        case 3:
	          days = '星期三';
	          break;
	        case 4:
	          days = '星期四';
	          break;
	        case 5:
	          days = '星期五';
	          break;
	        case 6:
	          days = '星期六';
	          break;
	        case 0:
	          days = '星期日';
	          break;
	      }
	      this.time = {
	        year,
	        month,
	        day,
	        hour,
	        min,
	        seconds,
	        days,
	      }
	    }
  	},
  	created(){
    this.getCurrentDate()
    },
    mounted() {
	 setInterval(() => {
     this.getCurrentDate()
      }, 1000)
	}
}
</script>

四、程序语录

程序员爱情观:爱情就像死循环,一旦执行就陷进去了!

本篇博客文章模板唯一版权归属*©春波petal*

相关推荐
耶啵奶膘23 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript