当前位置：首页 > news >正文

Vue3.2+TS在v-for的时候，循环处理时间，将其变成xx-xx-xx xx:xx:xx格式，最后教给大家自己封装一个时间hooks，直接复用

news 2025/7/9 23:27:40

Vue3.2+TS在v-for的时候，循环处理时间，将其变成xx-xx-xx xx:xx:xx格式

最后教给大家自己封装一个时间hooks，直接复用

1.没有封装，直接使用

<template><div><ul><li v-for="item,index in arr" :key="item">{{index}}-----{{item}}---{{formateDate(item)}}</li></ul></div>
</template><script setup lang="ts">
const arr:string[] = ['Wed Aug 10 2023 16:51:08 GMT+0800 (中国标准时间)','Wed Aug 12 2022 16:53:03 GMT+0800 (中国标准时间)','Wed Aug 11 2021 16:54:04 GMT+0800 (中国标准时间)','Wed Aug 05 2020 16:55:03 GMT+0800 (中国标准时间)','Wed Aug 09 2019 16:56:01 GMT+0800 (中国标准时间)',
]
const formateDate = (date:string)=> {if (!date)  return '';const timer = new Date(date)let year = timer.getFullYear()let mouth = addZero(timer.getMonth() + 1)let day = addZero(timer.getDate())let hour = addZero(timer.getHours())let min = addZero(timer.getMinutes())let sec = addZero(timer.getSeconds())return `${year}-${mouth}-${day} ${hour}:${min}:${sec}`  
}const addZero = (num:number)=>{return num > 9 ? num : `0${num}`
}</script>
<style scoped lang="less">
ul{list-style-type: none;li{height: 30px;line-height: 30px;background-color: aqua;margin-bottom: 10px;}
}</style>

假如我们现在其他地方还需要用到这个，那么我们可以把这个方法封装成一个hooks，用以复用

1.在src目录下，新建一个utils文件夹，定义一个timehandle文件，将需要的时间格式转化函数放进去，然后导出。

export const formateDate = (date:string)=> {if (!date)  return '';const timer = new Date(date)let year = timer.getFullYear()let mouth = addZero(timer.getMonth() + 1)let day = addZero(timer.getDate())let hour = addZero(timer.getHours())let min = addZero(timer.getMinutes())let sec = addZero(timer.getSeconds())return `${year}-${mouth}-${day} ${hour}:${min}:${sec}`  
}const addZero = (num:number)=>{return num > 9 ? num : `0${num}`
}

2.在需要用到这个函数的组件内，将其导入

<template><div><ul><li v-for="item,index in arr" :key="item">{{index}}-----{{item}}---{{formateDate(item)}}</li></ul></div>
</template><script setup lang="ts">
import {formateDate} from './utils/timehandle'
const arr:string[] = ['Wed Aug 10 2023 16:51:08 GMT+0800 (中国标准时间)','Wed Aug 12 2022 16:53:03 GMT+0800 (中国标准时间)','Wed Aug 11 2021 16:54:04 GMT+0800 (中国标准时间)','Wed Aug 05 2020 16:55:03 GMT+0800 (中国标准时间)','Wed Aug 09 2019 16:56:01 GMT+0800 (中国标准时间)',
]</script>
<style scoped lang="less">
ul{list-style-type: none;li{height: 30px;line-height: 30px;background-color: aqua;margin-bottom: 10px;}
}</style>