vue3-用dayjs将时间戳转为年月日格式

已知,格式化时间:dayjs(cellValue).format('YYYY-MM-DD')

用法:

import dayjs from 'dayjs';

dayjs(时间戳).format('YYYY-MM-DD HH:mm:ss');

 如,在get请求中使用:

service.get('/trace/'+sourceSearchInput.value).then(res => {
      dialogSearchResult.value.push(res);   //返回对象,push进去 & vue3中 取变量值-》变量.value
      res.createTime = dayjs(res.createTime).format('YYYY-MM-DD HH:mm:ss');
      res.updateTime = dayjs(res.updateTime).format('YYYY-MM-DD HH:mm:ss')
    }).catch(error => {
      ElMessage({
        type:'error',
        message:'请输入正确的值'
      })
    })

测试代码:

<template>
  <div>
    <el-button @click="bt" type="success"></el-button>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
function bt(){
    alert(dayjs(1651042749000).format('YYYY-MM-DD HH:mm:ss'));
}

</script>


<style lang="less">

</style>('YYYY-MM-DD HH:mm:ss');

测试结果 :

 

 

dayjs中文官网:Format · Day.js (gitee.io)

### Vue 中实现时间戳转换为年月日时分秒 为了在 Vue 应用程序中将时间戳转换成 `yyyy-MM-dd HH:mm:ss` 的格式,可以采用多种方法来处理这个问题。 #### 方法一:使用自定义函数进行格式化 通过创建一个辅助函数来进行日期格式化的操作,在组件的方法部分定义此功能: ```javascript <script> export default { data() { return { timestamp: &#39;1657074770&#39;, }; }, methods: { // 定义用于格式时间戳的方法 formatTimestamp(timestamp, fmt = "yyyy-MM-dd HH:mm:ss") { let date = new Date(parseInt(timestamp) * 1000); var o = { "M+": date.getMonth() + 1, "d+": date.getDate(), "H+": date.getHours(), "m+": date.getMinutes(), "s+": date.getSeconds() }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace( RegExp.$1, RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length) ); } } return fmt; } } }; </script> <template> <!-- 使用该方法 --> <p>{{ formatTimestamp(timestamp) }}</p> </template> ``` 这种方法允许灵活地调整输出的时间格式,并且可以直接在模板内调用这个方法[^2]。 #### 方法二:利用全局过滤器简化视图层逻辑 另一种更简洁的方式是在项目启动之初就注册一个全局过滤器,这样可以在任何地方方便地应用相同的格式化规则而无需重复编写代码: ```javascript // main.js 或者其他入口文件 import Vue from &#39;vue&#39;; Vue.filter(&#39;dateFormat&#39;, function(value, fmt=&#39;yyyy-MM-dd HH:mm:ss&#39;) { const date = new Date(Number(value)*1000); const o = { "M+": date.getMonth() + 1, //月份 "d+": date.getDate(), //日 "H+": date.getHours(), //小时 "m+": date.getMinutes(), //分钟 "s+": date.getSeconds(), //秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); for(let k in o){ if(new RegExp("("+k+")").test(fmt)){ fmt=fmt.replace(RegExp.$1,(RegExp.$1.length==1)?o[k]:("00"+o[k]).substr((""+o[k]).length)); } } return fmt; }); ``` 之后就可以像下面这样轻松地在模板中使用它了: ```html <p>{{ timestamp | dateFormat }}</p> <!-- 输出形如:"2022-08-09 12:34:56" --> ``` 这种方式不仅提高了代码重用率还减少了不必要的冗余[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值