vue 计算当前时间星期几多少号和未来五天的日期和星期几,怎么写?
时间: 2024-02-01 13:14:07 浏览: 16
你可以使用 JavaScript 中的 Date 对象来计算当前时间和未来五天的日期和星期几。下面是一个示例代码:
```html
<template>
<div>
<p>当前时间:{{ currentDate }}</p>
<p>星期{{ currentDay }}</p>
<p>未来五天:</p>
<ul>
<li v-for="(date, index) in futureDates" :key="index">
{{ date }} 星期{{ futureDays[index] }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
currentDate: "",
currentDay: "",
futureDates: [],
futureDays: [],
};
},
mounted() {
this.getCurrentDate();
this.getFutureDates();
},
methods: {
getCurrentDate() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const day = now.getDay();
this.currentDate = `${year}-${month}-${date}`;
this.currentDay = day === 0 ? 7 : day;
},
getFutureDates() {
const futureDates = [];
const futureDays = [];
for (let i = 1; i <= 5; i++) {
const now = new Date();
now.setDate(now.getDate() + i);
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const day = now.getDay();
futureDates.push(`${year}-${month}-${date}`);
futureDays.push(day === 0 ? 7 : day);
}
this.futureDates = futureDates;
this.futureDays = futureDays;
},
},
};
</script>
```
在这个示例中,我们使用了 `new Date()` 来获取当前的时间,然后使用 `getFullYear()`、`getMonth()` 和 `getDate()` 方法来获取年、月和日。使用 `getDay()` 方法可以获取星期几,返回值为 0-6,0 表示星期日,1 表示星期一,以此类推。我们还使用了 `setDate()` 方法来计算未来五天的日期。
在模板中,我们使用了 Vue 的指令和插值语法来展示数据。这里用到了 `v-for` 指令来循环展示未来五天的日期和星期几。
注意,在计算星期几时,需要将 0 转换为 7,因为中国将星期日作为一周的最后一天。