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

这篇具有很好参考价值的文章主要介绍了Vue3.2+TS在v-for的时候，循环处理时间，将其变成xx-xx-xx xx:xx:xx格式，最后教给大家自己封装一个时间hooks，直接复用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

文章来源地址https://www.toymoban.com/news/detail-646619.html

到了这里，关于Vue3.2+TS在v-for的时候，循环处理时间，将其变成xx-xx-xx xx:xx:xx格式，最后教给大家自己封装一个时间hooks，直接复用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！