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*

相关推荐
前端小巷子16 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js