vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间

简介: vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间

Vue 3中,我们可以使用JavaScript的Date对象来获取当前时间,并基于当前时间计算未来一周的日期。然后,这些日期可以在Vue模板中循环显示。下面,我们将逐步完成这个任务,并附上相应的代码和注释。

步骤 1: 创建Vue 3项目

如果你还没有Vue 3项目,你可以使用Vue CLI创建一个。在命令行中运行:

npm install -g @vue/cli  
vue create my-vue3-project

选择默认配置或根据你的需要进行配置。

步骤 2: 在Vue组件中编写代码

  1. 在组件的data函数中定义日期列表

在Vue组件中,我们将在data函数中定义一个数组来存储未来一周的日期。

<script>  
export default {  
  data() {  
    return {  
      nextWeekDates: [], // 用于存储未来一周的日期  
    };  
  },  
  // ... 其他选项  
};  
</script>
  1. mounted钩子中计算并填充日期列表

在组件的mounted钩子中,我们将获取当前日期,并计算未来一周的日期。

<script>  
export default {  
  // ... 其他选项  
  mounted() {  
    this.calculateNextWeekDates();  
  },  
  methods: {  
    calculateNextWeekDates() {  
      const today = new Date(); // 获取当前日期  
      this.nextWeekDates = []; // 清空数组  
  
      // 循环添加未来一周的日期  
      for (let i = 0; i < 7; i++) {  
        // 设置日期为当前日期加上i天  
        today.setDate(today.getDate() + i);  
  
        // 将日期转换为字符串格式并添加到数组中  
        // 这里我们使用YYYY-MM-DD的格式  
        const formattedDate = `${today.getFullYear()}-${('0' + (today.getMonth() + 1)).slice(-2)}-${('0' + today.getDate()).slice(-2)}`;  
        this.nextWeekDates.push(formattedDate);  
      }  
    },  
  },  
};  
</script>
  1. 在模板中循环显示日期列表

在Vue模板中,我们可以使用v-for指令来循环显示nextWeekDates数组中的日期。

<template>  
  <div>  
    <h2>未来一周的日期:</h2>  
    <ul>  
      <li v-for="(date, index) in nextWeekDates" :key="index">{{ date }}</li>  
    </ul>  
  </div>  
</template>

完整代码

将以上代码片段组合在一起,我们得到完整的Vue组件代码:

<template>  
  <div>  
    <h2>未来一周的日期:</h2>  
    <ul>  
      <li v-for="(date, index) in nextWeekDates" :key="index">{{ date }}</li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      nextWeekDates: [],  
    };  
  },  
  mounted() {  
    this.calculateNextWeekDates();  
  },  
  methods: {  
    calculateNextWeekDates() {  
      const today = new Date();  
      this.nextWeekDates = [];  
  
      for (let i = 0; i < 7; i++) {  
        today.setDate(today.getDate() + i);  
        const formattedDate = `${today.getFullYear()}-${('0' + (today.getMonth() + 1)).slice(-2)}-${('0' + today.getDate()).slice(-2)}`;  
        this.nextWeekDates.push(formattedDate);  
      }  
    },  
  },  
};  
</script>


相关文章
|
7天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
21 4
|
17天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
32 2
|
17天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
24 2
|
17天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
52 1
|
12天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
8 0
|
12天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
13 0
|
12天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
68 0
|
12天前
|
JavaScript
【vue】 vue 翻页时钟制作,vue2、vue3
【vue】 vue 翻页时钟制作,vue2、vue3
23 0