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>

效果图

总结

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

相关文章

  • vue中插值表达式使用的示例详解

    vue中插值表达式使用的示例详解

    Vue的插值表达式是一种特殊的语法,用于在模板中动态地将数据绑定到视图中,一般使用双大括号 ("{{ }}")将表达式包裹起来,下面我们就来根据三个案例来深入了解下插值表达式的使用吧
    2023-11-11
  • vue中Axios的封装与API接口的管理详解

    vue中Axios的封装与API接口的管理详解

    这篇文章主要给大家介绍了关于vue中Axios的封装与API接口的管理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-08-08
  • vue form表单post请求结合Servlet实现文件上传功能

    vue form表单post请求结合Servlet实现文件上传功能

    这篇文章主要介绍了vue form表单post请求结合Servlet实现文件上传功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • 基于Vue 服务端Cookies删除的问题

    基于Vue 服务端Cookies删除的问题

    今天小编就为大家分享一篇基于Vue 服务端Cookies删除的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项

    解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项

    这篇文章主要介绍了解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue首屏加载过慢出现长时间白屏的实现

    Vue首屏加载过慢出现长时间白屏的实现

    本文主要介绍了Vue首屏加载过慢出现长时间白屏的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 基于vue-element组件实现音乐播放器功能

    基于vue-element组件实现音乐播放器功能

    这篇文章主要介绍了基于vue-element组件实现音乐播放器功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-05-05
  • vue之el-upload使用FormData多文件同时上传问题

    vue之el-upload使用FormData多文件同时上传问题

    这篇文章主要介绍了vue之el-upload使用FormData多文件同时上传问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 一文详解Vue3中使用ref获取元素节点

    一文详解Vue3中使用ref获取元素节点

    这篇文章主要介绍了一文详解Vue3中使用ref获取元素节点,本文介绍在vue3的setup中使用composition API获取元素节点的几种方法,需要的朋友可以参考一下
    2022-07-07
  • Vue 展示.md文件的方法详解

    Vue 展示.md文件的方法详解

    这篇文章主要介绍了Vue 展示.md文件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05

最新评论