vue 获取两个日期之间的日期
时间: 2023-09-01 10:11:39 浏览: 60
你可以使用 JavaScript 中的 Date 对象来获取两个日期之间的日期,然后使用 Vue 来渲染结果。以下是一个示例:
```
<template>
<div>
<input type="date" v-model="startDate">
<input type="date" v-model="endDate">
<button @click="getDates">Get Dates</button>
<ul>
<li v-for="date in dates" :key="date">{{ date }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
startDate: '',
endDate: '',
dates: [],
};
},
methods: {
getDates() {
const start = new Date(this.startDate);
const end = new Date(this.endDate);
const dates = [];
for (let date = start; date <= end; date.setDate(date.getDate() + 1)) {
dates.push(new Date(date).toISOString().slice(0, 10));
}
this.dates = dates;
},
},
};
</script>
```
在上述代码中,我们绑定了两个日期输入框的值到 `startDate` 和 `endDate`,并且渲染了一个按钮来触发 `getDates` 方法。该方法使用 `Date` 对象来获取两个日期之间的每一天,并将每个日期转换为 ISO 字符串格式。最后,我们使用 Vue 来渲染日期列表。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)