给我一个demo示例获取当天星期几和日期和后六天的星期几和日期,不用获取年份和月份,放进一个数组中,并输入这个数组,技术使用vue3+vite,环境是uniapp
时间: 2024-03-12 09:45:19 浏览: 78
前端数据可视化demo 项目使用了vue3,由vite构建
好的,下面是一个示例代码:
```javascript
<template>
<div>
<h3>当天星期几和日期:{{ days[0].week }} {{ days[0].date }}</h3>
<h3>后六天星期几和日期:</h3>
<ul>
<li v-for="(day, index) in days" :key="index" v-if="index > 0">
{{ day.week }} {{ day.date }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
days: [],
};
},
mounted() {
this.getDays();
},
methods: {
getDays() {
const today = new Date();
const daysOfWeek = ["日", "一", "二", "三", "四", "五", "六"];
for (let i = 0; i < 7; i++) {
const day = {};
if (i === 0) {
day.week = "星期" + daysOfWeek[today.getDay()];
day.date = this.formatDate(today);
} else {
const nextDay = new Date(today.getTime() + i * 24 * 60 * 60 * 1000);
day.week = "星期" + daysOfWeek[nextDay.getDay()];
day.date = this.formatDate(nextDay);
}
this.days.push(day);
}
},
formatDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${month}月${day}日`;
},
},
};
</script>
```
这个示例代码中,我们使用了 `data` 来定义了一个名为 `days` 的数组。在 `mounted` 钩子函数中,我们调用了 `getDays` 方法来获取当天以及后六天的星期几和日期,并将它们放进 `days` 数组中。在 `getDays` 方法中,我们使用了 `Date` 对象和 `for` 循环来获取每一天的星期几和日期,并将它们放进一个 `day` 对象中,最后将 `day` 对象放进 `days` 数组中。同时,我们使用了 `formatDate` 方法来格式化日期。在模板中,我们使用了 `v-for` 来循环遍历 `days` 数组,并在列表中显示每一天的星期几和日期。
希望这个示例代码能够帮到你!
阅读全文