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>

效果图

总结

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

相关文章

  • SpringBoot+Vue 前后端合并部署的配置方法

    SpringBoot+Vue 前后端合并部署的配置方法

    这篇文章主要介绍了SpringBoot+Vue 前后端合并部署的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • 简单谈一谈Vue中render函数

    简单谈一谈Vue中render函数

    vue中的render函数,它返回的是一个虚拟节点vnode,也就是我们要渲染的节点,下面这篇文章主要给大家介绍了关于Vue中render函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 使用watch监听路由变化和watch监听对象的实例

    使用watch监听路由变化和watch监听对象的实例

    下面小编就为大家分享一篇使用watch监听路由变化和watch监听对象的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue之input输入框防抖debounce函数的使用方式

    vue之input输入框防抖debounce函数的使用方式

    这篇文章主要介绍了vue之input输入框防抖debounce函数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue超时计算的组件实例代码

    vue超时计算的组件实例代码

    这篇文章主要介绍了vue超时计算的组件实例代码,需要的朋友可以参考下
    2018-07-07
  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    Vue+ElementUI实现表单动态渲染、可视化配置的方法

    这篇文章主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下
    2018-03-03
  • Vue2.0 http请求以及loading展示实例

    Vue2.0 http请求以及loading展示实例

    下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue-electron使用serialport时问题解决方案

    vue-electron使用serialport时问题解决方案

    这篇文章主要介绍了vue-electron使用serialport时问题解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Vue3.0实现无限级菜单

    Vue3.0实现无限级菜单

    这篇文章主要为大家详细介绍了基于Vue3.0实现无限级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • axios二次封装的详细过程与跨域问题

    axios二次封装的详细过程与跨域问题

    通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加,api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护,下面这篇文章主要给大家介绍了关于axios二次封装的详细过程与跨域问题的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论