一、文章引导
二、博主简介
🌏博客首页： 春波petal
📑文章摘要：vue 年月日时分秒-星期
💌春波寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。
三、文章内容
废话不多说，直接copy代码使用
1、template
<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
<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
