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*

相关推荐
dal118网工任子仪1 分钟前
94,【2】buuctf web [安洵杯 2019]easy_serialize_php
android·前端·php
大模型铲屎官31 分钟前
HTML5 技术深度解读:本地存储与地理定位的最佳实践
前端·html·html5·本地存储·localstorage·地理定位·geolocation api
一 乐1 小时前
基于vue船运物流管理系统设计与实现(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端·船运系统
m0_528723811 小时前
在React中使用redux
前端·javascript·react.js
傻小胖2 小时前
vue3中customRef的用法以及使用场景
前端·javascript·vue.js
谦谦橘子2 小时前
手把手教你实现一个富文本
前端·javascript
Future_yzx2 小时前
Java Web的发展史与SpringMVC入门学习(SpringMVC框架入门案例)
java·前端·学习
star010-2 小时前
【视频+图文详解】HTML基础4-html标签的基本使用
前端·windows·经验分享·网络安全·html·html5
engchina2 小时前
CSS Display属性完全指南
前端·css
engchina2 小时前
详解CSS `clear` 属性及其各个选项
前端·css·css3