vue如何转换时间格式为年月日时分秒和年月日(补零)

 更新时间:2024年04月25日 11:36:58   作者:施玥喵  
这篇文章主要介绍了vue如何转换时间格式为年月日时分秒和年月日(补零),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一.vue转换时间为年月日(补零)

  datatime(value) {
	   var data = new Date(value);
	   var month =data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
	   var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
	   this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date;
	   console.log( this.addForm.enter_date)
	  },

效果图

二.vue 转换时间格式 为年月日时分秒

方法一

在main.js引入 过滤器 

Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

在需要的组件里

<el-table-column label="发生日期和时刻" align="center">
         <template slot-scope="scope">{{scope.row.guzhangStartTime | dateFormat}}</template>
</el-table-column>
//guzhangStartTime  是你表格数据里拿到的字段

方法二

npm i moment --save

在main.js中

//转换时间格式
import moment from 'moment/moment'
Vue.filter('moment', function (value, formatString) {
    formatString = formatString || 'YYYY-MM-DD';
return moment(value).format(formatString);

});

在需要的组件里

<el-table-column label="故障记录日期" align="center">
       <template slot-scope="scope">{{scope.row.guzhangjiluTime | moment}}</template>
</el-table-column>

效果图

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 在vue3.0中封装button使用slot组件

    在vue3.0中封装button使用slot组件

    这篇文章主要介绍了在vue3.0中封装button使用slot组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Element plus 表单中下拉框的空值问题解决

    Element plus 表单中下拉框的空值问题解决

    有时候会碰到查询条件需要用下拉框来区分的时候,比如需要区分全部 | 启用 | 停用三个状态,这时一般会给全部的value值设置为'',但是这样会导致下拉框无法选中对应的全部选项,本文就来介绍一下这个问题解决,感兴趣的可以了解一下
    2024-11-11
  • 详解VScode编辑器vue环境搭建所遇问题解决方案

    详解VScode编辑器vue环境搭建所遇问题解决方案

    这篇文章主要介绍了VScode编辑器vue环境搭建所遇问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue实现版本检测与升级提示

    Vue实现版本检测与升级提示

    在现代Web应用开发中,版本检测与升级提示是提升用户体验的重要环节,本文将详细介绍如何在Vue应用中实现这一功能,有需要的小伙伴可以参考一下
    2025-04-04
  • 为Vue3 组件标注 TS 类型实例详解

    为Vue3 组件标注 TS 类型实例详解

    这篇文章主要为大家介绍了为Vue3 组件标注 TS 类型实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue-router传参的四种方式超详细讲解

    vue-router传参的四种方式超详细讲解

    这篇文章主要介绍了vue-router传参的四种方式超详细,有router-link路由导航方式传参,调用$router.push实现路由传参,通过路由属性name匹配路由,再根据params传递参数等等,结合示例代码讲解的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue-element如何实现动态换肤存储

    vue-element如何实现动态换肤存储

    这篇文章主要介绍了vue-element如何实现动态换肤存储问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • electron实现静默打印的示例代码

    electron实现静默打印的示例代码

    这篇文章主要介绍了electron实现静默打印的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vuex的使用及知识点笔记

    Vuex的使用及知识点笔记

    这篇文章主要介绍了Vuex的使用及知识点笔记,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue实现固定定位图标滑动隐藏效果

    Vue实现固定定位图标滑动隐藏效果

    移动端页面,有时候会出现一些固定定位在底部图标,比如购物车等。这篇文章主要介绍了Vue制作固定定位图标滑动隐藏效果,需要的朋友可以参考下
    2019-05-05

最新评论